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Introduccion 


Tutorial de Django Girls 


chat 


Este trabajo esta bajo la licencia internacional Creative Commons Attribution-ShareAlike 4.0. Para ver una copia de 
esta licencia, visita el siguiente enlace https://creativecommons.Org/licenses/by-sa/4.0/ 

Bienvenido/a 

jBienvenido/a al tutorial de las Django Girls! jNos alegra que estes aqui:) En este tutorial, te llevaremos de viaje a las 
entranas de la tecnologia web, para que veas todas las piezas que se necesitan para que la web funcione. 

Como pasa con todas las cosas nuevas, va a ser una aventura - pero no te preocupes; una vez que te has decidido a 
empezar, te va a irfenomenal :) 


Introduccion 

<i,Alguna vez has tenido la sensation de que el mundo es cada vez mas tecnologico? <[,que cada vez lo entiendes menos? 
^.Alguna vez te has planteado crear un sitio web pero no sabias por donde empezar? i,Has pensado alguna vez que el 
mundo del software es demasiado complicado como para intentar hacer algo por tu cuenta? 

Bueno, jtenemos buenas noticias! Programar no es tan dificil como parece y queremos demostrarte lo divertido puede 
llegar a ser. 

Este tutorial no te convertira en programadora de la noche a la manana. Si quieres ser buena en esto, necesitaras meses 
o incluso anos de aprendizaje y practica. Sin embargo queremos ensenarte que programar o crear sitios web no es tan 
complicado como parece. Intentaremos explicar las cosas lo mejor que podamos, para perderle el miedo a la tecnologia. 

jEsperamos conseguir que te guste la tecnologia tanto como a nosotras! 

<[,Que aprenderas con este tutorial? 

Cuando termines el tutorial, tendras una aplicacion web sencilla y funcional: tu propio blog. Te mostraremos como ponerla 
en linea, jpara que otros puedan ver tu trabajo! 

Tendra (mas o menos) esta pinta: 
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Si estas siguiendo este tutorial por tu cuenta y no tienes un mentor que te ayude en caso de dificultades, tenemos 

un chat para ti: jHemos pedido a mentores y asistentes de ediciones anteriores, que pasen por 

alii de vez en cuando para echar una mano a otras con el tutorial! jNo tengas miedo de preguntar ahi! 

Bien, empecemos por el comienzo... 

Seguir el tutorial desde casa 

Participar en un taller de Django Girls en vivo es genial, pero somos conscientes de que no siempre es posible hacerlo. 
Por eso, te recomendamos hacer este tutorial en casa. Para las que estais casa, estamos preparando videos que 
facilitaran seguir el tutorial por tu cuenta. Todavia esta en progreso, pero cada vez hay mas cosas explicadas en el canal 
de YouTube Coding is for girls (Nota: en ingles). 

En cada capitulo hay un enlace que Neva al video correspondiente (si lo hay). 

Sobre nosotras y Como contribuir 

Este tutorial lo mantiene DjangoGirls. Si encuentras algun error o quieres actualizar el tutorial, por favor sigue la guia de 
como contribuir. 

cTe gustaria ayudarnos a traducir el tutorial a otros idiomas? 
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Actualmente, las traducciones se hacen en la plataforma crowdin.com, en el siguiente enlace: 

https://crowdin.com/project/django-girls-tutorial 

Si tu idioma no aparece en la lista de crowdin, por favor abre un nuevo issue con el idioma para que podamos anadirlo. 
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Si estas haciendo el tutorial en casa 


Si estas haciendo el tutorial en casa, y no en uno de los eventos de Django Girls, puedes saltar este capitulo por completo 
e ir directamente al capitulo i,como funciona Internet?. 

Esto es porque cubrimos estas cosas en todo el tutorial de todos modos, y esto es solo una pagina adicional que recoge 
todas las instrucciones de instalacion en un solo lugar. El evento de Django Grils incluye una "noche de la instalacion" en 
la que instalamos todo, asi que no tenemos que molestar con ella durante el taller, asi que esto es util para nosotros. 

Si lo encuentras util, puedes seguir este capitulo tambien. Pero si quieres empezar a aprender antes de instalar un monton 
de cosas en tu computadora, saltate este capitulo y te explicaremos la parte de instalacion mas adelante. 

jBuena suerte! 


Instalacion 


En el taller construiremos un blog, y hay algunas tareas de configuration en el tutorial que seria bueno hacer de antemano 
para que estes listo para comenzar a codificar en el dia. 

Chromebook setup (if you're using one) Puedes [saltarte esta seccion] 

(http://tutorial.djangogirls. 0 rg/en/installation/#install-python) en caso de que no estes usando un Chromebook. Si lo estas 
usando, tu experiencia de instalacion sera algo diferente. Puedes ignorar el resto de las instrucciones de instalacion. ### 
IDE en la nube (PaizaCloud Cloud IDE, AWS Cloud9) Un IDE en la nube es una herramienta que te da un editor de codigo 
y acceso a un ordenador conectado a internet en el que puedes instalar, escribir y ejecutar software. En este tutorial, el 
IDE en la nube te servira como tu ‘maquina local*. Seguiras ejecutando comandos en una terminal igual que tus 
companeros de clase en OS X, Ubuntu, o Windows, pero tu terminal en realidad estara conectada a un ordenador 
corriendo en otro sitio que el IDE en la nube gestionara para ti. Aqui estan las instrucciones para IDEs en la nube 
(PaizaCloud Cloud IDE, AWS Cloud9). Puedes elegir uno de los IDEs en la nube, y seguir sus instrucciones. #### 
PaizaCloud Cloud IDE 1. Ve a [PaizaCloud Cloud IDE](https://paiza.cloud/) 2. Crea una cuenta 3. Haz click en ‘New 
Server* 4. Haz click en el boton Terminal (en el lado izquierdo de la ventana) Ahora deberias ver una interfaz con una 
barra y botones en la izquierda. Haz click en al boton "Terminal" para abrir la ventana de la terminal con un simbolo de 
sistema como este: 

Terminal 

$ La terminal enviara tus instrucciones al ordenador que Cloud 9 ha preparado para ti. Puedes redimensionar o maximizar 
la ventana para hacerla un poco mas grande. #### AWS Cloud9 1. Ve a [AWS Cloud9](https://aws.amazon.com/cloud9/) 2. 
Crea una cuenta 3. Haz click en ‘Create Environment* Deberias ver un interfaz con una barra lateral, una ventana principal 
grande con texto y una ventana pequena abajo del todo parecida a esto: 
bash 

yourusername:~/workspace $ La parte inferior es tu ‘terminal*, donde escribiras las instrucciones para el ordenador que 
Cloud 9 te ha preparado. Puedes redimensionar la ventana para hacerla un poco mas grande. ### Entorno Virtual Un 
entorno virtual (tambien llamado virtualenv) es como una caja privada donde podemos guardar codigo util para el proyecto 
en el que estamos trabajando. Lo usamos para guardar por separado los trozos de codigo de distintos proyectos, y que 
asi, las cosas no se mezclen entre proyectos. En la terminal de la parte inferior de Cloud 9, ejecuta lo siguiente: 

Cloud 9 

sudo apt update sudo apt install python3.6-venv Si aun asi, no te funciona, pide ayuda a tu mentor. A continuation, 
ejecuta: 

Cloud 9 


mkdir djangogirls cd djangogirls python3.6 -mvenv myvenv source myvenv/bin/activate pip install django~=2.0.6 (fijate que 
en la ultima linea hemos usado una tilde seguida de un signo de igual: ~=). ### GitHub Hazte una cuenta de [GitHub] 
(https://github.com). ### Python Anywhere El tutorial de Django Girls tiene una seccion que se llama "Despliegue", que es 
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el proceso de coger el codigo de tu nueva aplicacion web y ponerlo en un ordenador publicamente accesible (un servidor) 
para que todo el mundo pueda ver tu trabajo. Esta parte "chirria" un poco cuando haces el tutorial en un Chromebook, 
porque que ya estamos usando un ordenador que ya esta en Internet (en lugar de un ordenador local como un portatil). 
Sin embargo, aim tiene sentido, si pensamos que nuestro espacio de trabajo en Cloud9 es un lugar para nuestro trabajo 
"en progreso" y PythonAnywhere es el lugar donde ensenar nuestro sitio web mas terminado. Asi que create una cuenta 
de PythonAnywhere en [www.pythonanywhere.com](https://www.pythonanywhere.com). 


Instalar Python 


Para lectores en casa: este capitulo se cubre en el video Installing Python & Code Editor. 

Esta seccion esta basada en un tutorial de Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) 

Django esta escrito en Python. Necesitamos Python para hacer cualquier cosa en Django. Comencemos instalandolol. 
Tenemos que instalar Python 3.6, asi que si tienes una version anterior, debes actualizarla. 

Install Python: Windows 

Primero comprueba si tu computador tiene una version de Windows de 32-bit o 64-bit, presiona tecla Windows + 
Pause/Break, esto abrira tu System info (informacion de tu sistema), ahora busta la linea "System type". Puedes descargar 
Python para Windows desde el sitio web https://www.python.org/downloads/windows/. Haz click en el link "Latest Python 3 
release - Python x.x.x.". Si tu computador tiene una version de Windows de 64 bits, descarga Windows x86-64 
executable installer. De lo contrario, descarga Windows x86 executable installer. Despues de descargar el instalador, 
debes ejecutarlo (hazle doble click) y sigue las instrucciones. 

Algo a tener en cuenta: Durante la instalacion notaras una ventana llamada "Setup". Asegurate de seleccionar la casilla 
"Add Python 3.6 to Path" y luego haz click en "Install Now", como se muestra a continuation: 


Python 3.6.1 (64-bit) Setup 



Install Python 3.6.1 (64-bit) 

Select Install Now to install Python with default settings, or choose 
Customize to enable or disable features. 


X 



£ Install Now 

C:\Users\ User \AppData\Local\Programs\Python\Python36 


Includes IDLE, pip and documentation 
Creates shortcuts and file associations 


—> Customize installation 

Choose location and features 


python 

for 

windows 


0 Install launcher for all users (recommended) 
0 Add Python 3.6 to PATH 


Cancel 


En los proximos pasos, vas a utilizar la linea de comandos de Windows (acerca de la cual tambien de contaremos algo). 
De momento, si tienes que teclear algunos comandos, ve al menu de Inicio y teclea "Command Prompt" en el cuadro de 
busqueda. (En versiones anteriores de Windows, puedes arrancar la linea de comandos con menu de Inicio —> Sistema 
Windows —> Linea de Comandos.) Tambien puedes pulsar la tecla "Windows" + R hasta que aparezca la ventana 
"Ejecutar" (Run). Para abrir la linea de comandos, escribe "cmd" y pulsa enter en la ventana "Run". 
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Type the name of a program, folder, document, or 
Internet resource, and Windows will open it for you. 


Open: 


cmd 


OK 


Cancel 


Browse... 


Nota: Si estas utilizando una version anterior de Windows (7, Vista, o cualquier version anterior) y el instalador de Python 
3.6.x falla con un error, puedes tratar ya sea: 

1. instalar todas las actualizaciones de Windows e intentar instalar Python 3.6 nuevamente; o 

2. instalar una version de Python anterior, por ejemplo, 3.4.6. 

Si instalas una version anterior de Python, la pantalla de instalacion puede ser un poco diferente a la que se muestra 
arriba. Asegurate de desplazarte hacia abajo para ver "Add python.exe to Path", y dar click en el boton a la izquierda y 
seleccionar "Will be installed on local hard drive": 



Install Python: OS X 
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Nota Antes de instalar Python en OS X, debes asegurarte de que la configuracion del Mac permita instalar paquetes 
que no esten en la App Store, ve a preferencias del sistema (System Preferences, esta en la carpeta Aplicaciones), 
da click en "Seguridad y privacidad" (Security & Privacy) y luego la pestana "General". Si tu "Permitir aplicaciones 
descargadas desde:" (Allow apps downloaded from:) esta establecida a "Mac App Store," cambia a "Mac App Store 
y desarrolladores identificados." (Mac App Store and identified developers) 

Debes ir al sitio web https://www.python.org/downloads/release/python-361/ y descargar el instalador de Python: 

• Descargar el archivo Mac OS X 64-bit/32-bit installer , 

• Haz doble clic en python-3.4.3-macosx10.6.pkg para ejecutar al instalador. 

Install Python: Linux 

Es muy posible que ya tengas Python instalado de serie. Para verificar que ya lo tienes instalado (y que version es), abre 

una consola y escribe el siguiente comando: 

command-line 


$ python3 --version 
Python 3.6.1 


Si tienes una 'micro version' diferente de Python instalada, por ejemplo 3.6.0, entonces no tienes que actualizar. Si no 
tienes instalado Python o si deseas una version diferente, puedes instalarla de la siguiente manera: 

Install Python: Debian or Ubuntu 

Escribe este comando en tu consola: 

command-line 


$ sudo apt install python3.6 


Install Python: Fedora 

Usa este comando en tu consola: 

command-line 

$ sudo dnf instalar python3 


En versiones anteriores de Fedora tal vez te saiga un error de que no se encuentra el comando dnf . En ese caso utiliza 
yum en su lugar. 

Install Python: openSUSE 

Usa este comando en tu consola: 

command-line 


$ sudo zypper install python3 


Verifica que la instalacion fue exitosa abriendo una terminal y ejecutando el comando python3 : 
command-line 


$ python3 --version 
Python 3.6.1 


NOTA: Si estas en Windows y recibes un mensaje de error no se encontro python3 , intenta usar python (sin el 3 ) y 
comprueba si todavia es una version de Python 3.6. 
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Si tienes alguna duda o si algo salio mal y no sabes como resolverlo - jpide ayuda a tu tutor! A veces las cosas no van bien 
y que es mejor pedir ayuda a alguien con mas experiencia. 


Instala un Editor de Codigo 


Hay muchos editores diferentes y la eleccion es principalmente una cuestion de preferencia personal. La mayoria de 
programadores de Python usan IDEs (Entornos de Desarrollo Integrados) complejos pero muy potentes, como PyCharm. 
Sin embargo, como principiante, probablemente no es lo mas aconsejable; nuestras recomendaciones son igualmente 
potentes pero mucho mas simples. 

Abajo presentamos nuestras sugerencias pero, tambien puedes preguntarle a tu mentor cuales son las suyas - sera mas 
facil que te ayude. 

Gedit 

Gedit es un editor de texto de codigo abierto, gratuito, y que esta disponible para todos los sistemas operativos. 

Descargalo aqui 

Sublime Text 3 

Sublime Text es un editor muy popular con un periodo de prueba gratis. Es facil de instalar y de usar, y esta disponible 
para todos los sistemas operativos. 

Descargalo aqui 

Atom 

Atom es otro editor que usa mucha gente. Es gratuito, de codigo abierto y hay versiones para Windows, OS X y Linux. 
Atom ha sido desarrollado por GitHub. 

Descargalo aqui 

<[,Por que estamos instalando un editor de texto? 

Tal vez te estes preguntando por que estamos instalando un editor especializado en codigo, en lugar de usar un editor 
convencional como Word o Notepad. 

La principal razon es que el codigo tiene que ser texto piano y, el problema con programas como Word y Textedit es que 
no guardan texto piano, sino que guardan texto enriquecido (con estilos), usando formatos personalizados como RTF(Rich 
Text Format). 

La segunda razon es que los editores de texto son herramientas especiales para editar codigo, porque tienen 
caracteristicas utiles como resaltar el codigo con diferentes colores de acuerdo a su significado, o cerrar comillas 
automaticamente. 

Veremos todo esto en accion mas adelante. Pronto el editor de codigo se convertira en una de tus herramientas favoritas. 

0 

Crea un entorno virtual (virtualenv) e instala Django 
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Parte de esta seccion se basa en tutoriales por Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). 

Parte de este capitulo esta basada en el django-marcador tutorial bajo la licencia Creative Commons Attribution- 
ShareAlike 4.0 internacional. El tutorial de django-marcador tiene derechos de autor de Markus Zapke-Gundemann 
et al. 

Entorno virtual 

Antes de instalar Django, instalaremos una herramienta extremadamente util que ayudara a mantener tu entorno de 
desarrollo ordenado en tu computadora. Es posible saltarse este paso, pero es altamente recomendable. jEmpezar con la 
mejor configuracion posible te ahorrara muchos problemas en el futuro! 

Asi que, vamos a crear un entorno virtual (tambien llamado un virtuatenv). Virtualenv aisla tu configuracion de 
Python/Django por cada proyecto. Esto quiere decir que cualquier cambio que hagas en un sitio web no afectara a ningun 
otro que estes desarrollando. Genial, ^no? 

Todo lo que necesitas hacer es encontrar un directorio en el que quieras crear el virtualenv ; tu directorio home, por 
ejemplo. En Windows, puede verse como c:\users\Name (donde Name es el nombre de tu usuario). 

NOTA: En Windows, asegurate de que este directorio no contiene caracteres especiales o acentuados; si tu nombre 
de usuario contiene caracteres acentuados, usa un directorio distinto, por ejemplo c:\djangogiris . 

Para este tutorial usaremos un nuevo directorio djangogiris en tu directorio home: 

command-line 

$ mkdir djangogiris 
$ cd djangogiris 


Haremos un virtualenv llamado myvenv . El comando general estara en el formato: 
command-line 


$ python3 -m venv myvenv 


Virtual environment: Windows 

Para crear un nuevo virtualenv , necesitas abrir una terminal "command prompt" y ejecutar python -m venv myvenv . Se 
vera asi: 

command-line 


C:\Users\Name\djangogirls> python -m venv myvenv 


Donde myvenv es el nombre de tu virtualenv . Puedes utilizar cualquier otro nombre, pero asegurate de usar minusculas 
y no usar espacios, acentos o caracteres especiales. Tambien es una buena idea mantener el nombre corto. jVas utilizarlo 
muchas vecesl! 

Virtual environment: Linux and OS X 

Podemos crear un virtualenv en Linux y OS X, es tan sencillo como ejecutar python3 -m venv myvenv . Se vera asi: 
command-line 


$ python3 -m venv myvenv 


myvenv es el nombre de tu virtualenv . Puedes usar cualquier otro nombre, pero solo utiliza minusculas y no incluyas 
espacios. Tambien es una buena idea mantener el nombre corto. jVas a referirte muchas veces a el! 
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NOTA: En algunas versiones de Debian/Ubuntu, puede que obtengas el siguiente error: 
command-line 


The virtual environment was not created successfully because ensurepip is not available. En sistemas Debian/U 
buntu, tendras que instalar el paquete python3-venv usando el siguiente comando. 
apt-get install python3-venv 

Puede que tengas que usar sudo con este comando. Despues de instalar el paquete python3-venv, vuelve a crear 
tu entorno virtual. 


En este caso, sigue las instrucciones anteriores e instala el paquete python3-venv : 
command-line 


$ sudo apt install python3-venv 


NOTA: En algunas versiones de Debian/Ubuntu inicializar el entorno virtual de esta manera da el siguiente error: 
command-line 


Error: Command '[ 1 /home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' 
returned non-zero exit status 1 


Para evitar esto, utiliza directamente el comando virtuaienv . 
command-line 


$ sudo apt-get install python-virtualenv 
$ virtuaienv --python=python3.6 myvenv 


NOTA: Si obtienes un error como 
command-line 

E: Unable to locate package python3-venv 


entonces ejecuta: 
command-line 


sudo apt install python3.6-venv 


Trabajar con virtuaienv 

El comando anterior creara un directorio llamado myvenv (o cualquier nombre que hayas elegido) que contiene nuestro 
entorno virtual (basicamente un monton de archivos y carpetas). 

Working with virtuaienv: Windows 

Inicia el entorno virtual ejecutando: 

command-line 

C:\Users\Name\djangogirls> myvenv\Scripts\activate 
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Nota: en 10 de Windows puedes obtener un error en Windows PowerShell que dice execution of scripts is 
disabled on this system . En este caso, abre otro Windows PowerShell con la opcion "Ejecutar como administrador". 
Luego intenta escribir el siguiente comando antes de inicializar tu entorno virtual: 

command-line 


C:\WIND0WS\system32 > Set-ExecutionPolicy -ExecutionPolicy RemoteSigned 
Execution Policy Change 

The execution policy helps protect you from scripts that you do not trust. Changing the execution policy mi 
ght expose you to the security risks described in the about_Execution_Policies help topic at http://go.microso 
ft.com/fwlink/?LinkID=135170. Do you want to change the execution policy? [Y] Yes [A] Yes to All [N] No [L] 
No to All [S] Suspend [?] Help (default is "N"): A 


Working with virtualenv: Linux and OS X 

Inicia el entorno virtual ejecutando: 

command-line 


$ source myvenv/bin/activate 


jRecuerda reemplazar myvenv con tu nombre de virtualenv que hayas elegido! 

NOTA: a veces source podria no estar disponible. En ese caso trata hacerlo de esta forma: 
command-line 

$ . myvenv/bin/activate 


Sabras que tienes virtualenv iniciado cuando veas que la linea de comando en tu consola tiene el prefijo (myvenv) . 

Cuando trabajes en un entorno virtual, python automaticamente se referira a la version correcta, de modo que puedes 
utilizar python en vez de python3 . 

Ok, tenemos todas las dependencias importantes en su lugar. jFinalmente podemos instalar Django! 


Instalar Django 

Ahora que tienes tu virtualenv iniciado, puedes instalar Django. 

Antes de hacer eso, debemos asegurarnos que tenemos la ultima version de pip , el software que utilizamos para instalar 
Django: 

command-line 

(myvenv) ~$ python3 -m pip install --upgrade pip 


Instalar paquetes con un fichero de requisitos (requirements) 

Un fichero de requisitos (requirements) tiene una lista de dependencias que se deben instalar mediante pip install : 

Lo primero, crea un fichero requirements.txt dentro del directorio djangogiris/ , usando el editor de codigo que hemos 
instalado hace un momento: 


djangogiris 


-req 


uirements.txt 


Dentro del fichero djangogiris/reguirements.txt deberias tener el siguiente texto: 


13 



Instalacion 


djangogirl s/requirements.txt 


Django~=2.0.6 


Ahora, ejecuta pip install -r requirements.txt para instalar Django, 
command-line 


(myvenv) ~$ pip install -r requirements.txt 
Collecting Django~=2.0.6 (from -r requirements.txt (line 1)) 
Downloading Django-2.0.6-py3-none-any.whl (7.1MB) 
Installing collected packages: Django 
Successfully installed Django-2.0.6 


Installing Django: Windows 

Si obtienes un error al ejecutar pip en Windows comprueba si la ruta de tu proyecto contiene espacios, acentos o 
caracteres especiales (por ejemplo, c:\users\user Name\djangogiris ). Si los tiene, por favor considera moverla a 
otro lugar sin espacios, acentos o caracteres especiales (sugerencia: c:\djangogiris ). Crea un nuevo virtualenv en 
el nuevo directorio, luego borra el viejo y reintenta el comando anterior. (Mover el directorio de virtualenv no funciona 
puesto que virtualenv usa rutas absolutas.) 

Installing Django: Windows 8 and Windows 10 

Puede que tu linea de comandos se congele despues de que intentes instalar Django. Si esto sucede, en vez del 
comando anterior utiliza: 

command-line 

C:\Users\Name\djangogirls> python -m pip install -r requirements.txt 


Installing Django: Linux 

Si obtienes un error al ejecutar pip en Ubuntu 12.04 ejecuta python -m pip install -u --force-reinstall pip para 
arreglar la instalacion de pip en el virtualenv. 

jEso es todo! Ahora estas lista (por fin) para crear una aplicacion Django! 


Instalar Git 


Git es un "sistema de control de versiones" que utilizan muchos programadores. Este software puede seguir los cambios 
realizados en archivos a lo largo del tiempo de forma que mas tarde puedas volver a cualquier version anterior. Es un poco 
parecido a la opcion de "control de cambios" de Microsoft Word, pero mucho mas potente. 

Instalar Git 

Installing Git: Windows 

Puedes descargar Git desde git-scm.com. Puedes hacer click en "next" en todos los pasos a excepcion de uno; en el 
quinto paso titulado "Adjusting your PATH environment", escoge "Use Git and optional Unix tools from the Windows 
Command Prompt" (la de abajo del todo). Aparte de eso, los valores por defecto estan bien. "Checkout Windows-style, 
commit Unix-style line endings" tambien esta bien. 

No olvides reiniciar la terminal o powershell despues de que la instalacion termine. 

Installing Git: OS X 

Descarga Git de git-scm.com y sigue las instrucciones. 

Nota Si estas usando OS X 10.6, 10.7 o 10.8, tendras que instalar git desde aqui: Git installer for OS X Snow 
Leopard 
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Installing Git: Debian or Ubuntu 

command-line 

$ sudo apt install git 


Installing Git: Fedora 

command-line 

$ sudo dnf install git 


Installing Git: openSUSE 

command-line 

$sudo zypper install git 


Crear una cuenta de GitHub 


Visita GitHub.com y registra una nueva cuenta de usuario gratuita. 


Crear una cuenta de PythonAnywhere 


PythonAnywhere es un servicio para ejecutar codigo Python en servidores "en la nube". Lo vamos a usar para alojar 
nuestro sitio para que este disponible en Internet. 

Crea una cuenta de Principiante ("Beginner") en PythonAnywhere (el nivel gratuito esta bien, no necesitas tarjeta de 
credito). 

• www.pythonanywhere.com 

Plans and pricing 

Beginner: Free! 

A limited account with one web app at your-username. pythonanywhere. com, restricted outbound Internet access from your apps, low CPU/bandwidth, no 

I Python/Jupyter notebook support. 

It works and it's a great way to get started! 


Create a Beginner account 


Nota Cuando elijas un nombre de usuario, recuerda que la URLde tu blog tendra la forma 

tunombredeusuario.pythonanywhere.com , asi que lo mejor sera usar tu apodo o elegir un nombre que indique de que 
trata tu blog. 

Crear un token para la API de PythonAnywhere 

Solo tendras que hacer esto la primera vez. Cuando entres en PythonAnywhere, veras el panel de control ("dashboard"). 
En la esquina superior derecha, busca el enlace la pagina de tu cuenta ("Account"), selecciona una pestana llamada "API 
token" y pulsa el boton que pone "Create new API token". 
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Upgrade/Downgrade Account Email and security Teacher API Token 


Your API token 

You do not have an API token yet. 


Create a new API token 


By clicking this button you agree that you understand that this API is new and 


Comienza a leer 


Felicitaciones, ya tienes todo configurado y listo para seguir! Si aun tienes tiempo antes del taller, seria util comenzar a leer 
algunos de los capitulos iniciales: 

• ^Como funciona internet? 

• Introduccion a la linea de comandos 

• Introduccion a Python 

• <|,Que es Django? 


jDisfrutar el taller! 

Al comenzar el taller, podras ir directamente a Tu primer proyecto en Djangoi porque ya cubriste el material de los 
capitulos anteriores. 
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Configuracion de Chromebook 


Nota Si ya ejecutaste todas las instrucciones indicadas durante la instalacion, no es necesario volverlo a hacer - 
puedes omitir lo que sigue hasta la Introduccion a Python. 

Puedes saltarte esta seccion en caso de que no estes usando un Chromebook. Si lo estas usando, tu experiencia de 
instalacion sera algo diferente. Puedes ignorar el resto de las instrucciones de instalacion. 

IDE en la nube (PaizaCloud Cloud IDE, AWS Cloud9) 

Un IDE en la nube es una herramienta que te da un editor de codigo y acceso a un ordenador conectado a internet en el 
que puedes instalar, escribir y ejecutar software. En este tutorial, el IDE en la nube te servira como tu maquina local. 
Seguiras ejecutando comandos en una terminal igual que tus companeros de clase en OS X, Ubuntu, o Windows, pero tu 
terminal en realidad estara conectada a un ordenador corriendo en otro sitio que el IDE en la nube gestionara para ti. Aqui 
estan las instrucciones para IDEs en la nube (PaizaCloud Cloud IDE, AWS Cloud9). Puedes elegir uno de los IDEs en la 
nube, y seguir sus instrucciones. 

PaizaCloud Cloud IDE 

1. Ve a PaizaCloud Cloud IDE 

2. Crea una cuenta 

3. Haz click en New Server 

4. Haz click en el boton Terminal (en el lado izquierdo de la ventana) 

Ahora deberias ver una interfaz con una barra y botones en la izquierda. Haz click en al boton "Terminal" para abrir la 
ventana de la terminal con un simbolo de sistema como este: 

Terminal 

$ 

La terminal enviara tus instrucciones al ordenador que Cloud 9 ha preparado para ti. Puedes redimensionar o maximizar la 
ventana para hacerla un poco mas grande. 

AWS Cloud9 

1. Ve a AWS Cloud9 

2. Crea una cuenta 

3. Haz click en Create Environment 

Deberias ver un interfaz con una barra lateral, una ventana principal grande con texto y una ventana pequena abajo del 
todo parecida a esto: 

bash 


yourusername:-/workspace $ 

La parte inferior es tu terminal, donde escribiras las instrucciones para el ordenador que Cloud 9 te ha preparado. Puedes 
redimensionar la ventana para hacerla un poco mas grande. 

Entorno Virtual 


17 


Instalacion (chromebook) 


Un entorno virtual (tambien llamado virtualenv) es como una caja privada donde podemos guardar codigo util para el 
proyecto en el que estamos trabajando. Lo usamos para guardar por separado los trozos de codigo de distintos proyectos, 
y que asi, las cosas no se mezclen entre proyectos. 

En la terminal de la parte inferior de Cloud 9, ejecuta lo siguiente: 

Cloud 9 


sudo apt update 

sudo apt install python3.6-venv 


Si aun asi, no te funciona, pide ayuda a tu mentor. 
A continuation, ejecuta: 

Cloud 9 


mkdir djangogirls 
cd djangogirls 
python3.6 -mvenv myvenv 
source myvenv/bin/activate 
pip install django~=2.0.6 


(fijate que en la ultima linea hemos usado una tilde seguida de un signo de igual: ~=). 

GitHub 

Hazte una cuenta de GitHub. 

Python Anywhere 

El tutorial de Django Girls tiene una section que se llama "Despliegue", que es el proceso de coger el codigo de tu nueva 
aplicacion web y ponerlo en un ordenador publicamente accesible (un servidor) para que todo el mundo pueda ver tu 
trabajo. 

Esta parte "chirria" un poco cuando haces el tutorial en un Chromebook, porque que ya estamos usando un ordenador que 
ya esta en Internet (en lugar de un ordenador local como un portatil). Sin embargo, aun tiene sentido, si pensamos que 
nuestro espacio de trabajo en Cloud9 es un lugar para nuestro trabajo "en progreso" y PythonAnywhere es el lugar donde 
ensenar nuestro sitio web mas terminado. 

Asi que create una cuenta de PythonAnywhere en www.pythonanywhere.com. 
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<[,C6mo funciona Internet? 


Para lectores en casa: este capitulo esta cubierto en el video ^Como funciona Internet?. 

Este capitulo esta inspirado en la charla "How the Internet works" de Jessica McKellar 
(http://web.mit.edu/jesstess/www/). 

Apostamos a que utilizas Internet todos los dias. Pero, <^sabes lo que pasa cuando escribes una direction como 
http://djangogirls.org en tu navegador y presionas enter ? 

Lo primero que hay que entender es que un sitio web se compone de unos cuantos ficheros almacenados en un disco 
duro. Al igual que tus peliculas, musica o fotos. Sin embargo, los sitios web poseen una peculiaridad: incluyen un codigo 
informatico llamado HTML. 

Si no estas familiarizada con la programacion, puede ser dificil captar HTML a la primera, pero tus navegadores web 
(como Chrome, Safari, Firefox, etc.) lo aman. Los navegadores estan disenados para entender este codigo, seguir sus 
instrucciones y presentar estos archivos de los cuales esta hecho tu sitio web, exactamente de la forma que quieres. 

Como cualquier otro archivo, tenemos que guardar los archivos HTML en algun lugar de un disco duro. Para Internet, 
utilizamos equipos especiales, de gran alcance llamados servidores. Estos no tienen una pantalla, raton o teclado, debido 
a que su proposito es almacenar datos y servirlos. Por esa razon son llamados servidores - porque sirven los datos. 

OK, pero quieres saber como Internet se ve, ^cierto? 

jTe hemos hecho una imagen! Luce algo ash 



clo s e up 


Parece un lio, <^no? De hecho, es una red de maquinas interconectadas (los servidores que nombramos anteriormente). 
jCientos de miles de maquinas! jMuchos, muchos kilometres de cables alrededor del mundo! Puedes visitar el sitio web 
Submarine Cable Map (http://submarinecablemap.com/) y ver lo complicada que es la red. Aqui hay una captura de 
pantalla de la pagina web: 
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Es fascinante, <^no? Pero seria imposible tener un cable entre todas y cada una de las maquinas conectadas a internet. 
Asi que, para llegar a una maquina (por ejemplo la que aloja http://djangogirls.org) tenemos que elevar una solicitud 
mediante una gran cantidad de maquinas diferentes. 

Se parece a esto: 
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Imagina que cuando escribes http://djangogirls.org, estas enviando una carta que dice: "Estimadas Django Girls, me 
gustaria ver su sitio web djangogirls.org. Por favor, envienmelo!" 

Tu carta va hacia la oficina de correo mas cercana. Luego va a otra que es un poco mas cerca de su destinatario, luego 
otra y otra hasta que es entregada a su destino. La unica cosa diferente es que si envias muchas cartas (paquetes de 
datos) al mismo lugar, cada una podria ir a traves de oficinas de correos totalmente distintas (routers). Esto depende de 
como se distribuyen en cada oficina. 
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Asi es como funciona - se envian mensajes y se espera una respuesta. En lugar de papel y lapiz, se usan bytes de datos, 
pero jla idea es la misma! 

En lugar de direcciones con el nombre de la calle, ciudad, codigo postal y nombre del pais, utilizamos direcciones IP. Tu 
computadora pide primero el DNS (Domain Name System - en espanol Sistema de Nombres de Dominio) para traducir 
djangogirls.org a una direccion IP. Funciona en cierta manera como los viejos directorios telefonicos donde puedes buscar 
el nombre de la persona que se deseas contactar y encontrar su numero de telefono y direccion. 

Cuando envias una carta, esta necesita tener ciertas caracteristicas para ser entregada correctamente: una direccion, 
sello, etc. Tambien utilizas un lenguaje que el receptor pueda entender, ^cierto? Lo mismo se aplica a los paquetes de 
datos que envia para ver un sitio Web. Utilizamos un protocolo llamado HTTP (Protocolo de transferencia de hipertexto). 

Asi que, basicamente, cuando tienes un sitio web necesitas tener un servidor (la maquina) donde este vive. Cuando el 
servidor recibe una peticidn entrante (en una carta), este envia su sitio de Internet (en otra carta). 

Ya que este es un tutorial de Django, puede que te preguntes que lo que Django hace. Bueno, cuando envias una 
respuesta, no siempre quieres enviar lo mismo a todo el mundo. Es mucho mejor si tus cartas son personalizadas, 
especialmente para la persona que acaba de escribir, ^.cierto? Django nos ayuda con la creacion de estas cartas 
personalizadas. :) 

Suficiente conversation - tiempo de crear! 
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Introduccion a la interfaz de linea de comandos 


Para los lectores en casa: este capitulo es visto en el video Tu nuevo amigo: linea de comandos. 

Es emocionante, ^.verdad? Vas a escribir tu primera linea de codigo en pocos minutos! :) 

Permitenos presentarte a tu primer nuevo amigo: jla linea de comandos! 

Los siguientes pasos te mostraran como usar aquella ventana negra que todos los hackers usan. Puede parecer un poco 
aterrador al principio pero es solo un mensaje en pantalla que espera a que le des ordenes. 

Nota Ten en cuenta que a lo largo de este libro usamos los terminos 'directorio' y 'carpeta' indistintamente pero son 
la misma cosa. 

i,Que es la linea de comandos? 

La ventana, que generalmente es llamada linea de comandos 6 interfaz de linea de comandos, es una aplicacion 
basada en texto para ver, manejar y manipular archivos en tu ordenador. Similar a Windows Explorer o Finder en Mac, 
pero sin la interfaz grafica. Otros nombres para la linea de comandos son: cmd, CLI, prompt -simbolo de sistema-, console 
-consola- o terminal. 

Abrir la interfaz de linea de comandos 

Lo primero que debemos hacer para empezar a experimentar con nuestra interfaz de linea de comandos es abrirla. 

Opening: Windows 

Ve a Menu de inicio —> Windows System —> Command Prompt. 

En versiones anteriores de Windows, busca en Menu de inicio —> Todos los programas —> Accesorios —> Command 
Prompt. 

Opening: OS X 

Ve a Aplicaciones —> Utilidades —> Terminal. 

Opening: Linux 

Probablemente estara en Aplicaciones —> Accesorios —> Terminal, pero en tu sistema puede estar en un sitio distinto. Si no 
lo encuentras, busca en Google.:) 

Simbolo del Sistema (Prompt) 

Ahora deberias ver una ventana blanca o negra que esta esperando tus ordenes. 

Prompt: OS X and Linux 

Si estas en un Mac o Linux, seguramente veras un simbolo $ , como este: 
command-line 

$ 

Prompt: Windows 

En Windows, es un signo asi > , como este: 
command-line 
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Cada comando sera precedido por este signo y un espacio, pero no tienes que escribirlo. Tu computadora lo hara por ti. :) 

Solo una pequena nota: en tu caso puede que haya algo como c:\users\oia> o oias-MacBook-Air:-oia$ antes del 
simbolo prompt y eso esta perfecto. 

La parte hasta e incluyendo $ o > se llama la linea de comandos o prompt. Esta te solicita escribir algo ahi. 

En el tutorial, cuando queremos escribir un comando, incluiremos el $ o > y de vez en cuando mas a la izquierda. 
Ignora la parte izquierda y teclea solo el comando, que es lo que empieza despues del prompt. 

Tu primer comando (jBIEN!) 

Comencemos escribiendo este comando: 

Your first command: OS X and Linux 

command-line 

$ whoami 


Your first command: Windows 

command-line 


> whoami 


Y pulsa enter . Este es nuestro resultado: 
command-line 

$ whoami olasitarska 

Como puedes ver, el ordenador ha imprimido tu nombre de usuario. Genial, <[,eh? :) 

Trata de escribir cada comando, no copies y pegues. jTe acordaras mas de esta manera! 

Fundamentos 

Cada sistema operativo tiene un conjunto diferente de comandos para la linea de comandos, as! que asegurate de seguir 
las instrucciones para tu sistema operativo. Vamos a intentarlo, ^de acuerdo? 

Directorio actual 

Estaria bien saber donde estamos ahora, ^.verdad? Vamos a ver. Escribe este comando y pulsa intro : 

Current directory: OS X and Linux 

command-line 

$ pwd 

/Users/olasitarska 


Nota: 'pwd' significa 'print working directory' - en espanol, 'mostrar directorio de trabajo'. 

Current directory: Windows 
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command-line 


> cd 

C:\Users\olasitarska 


Nota: 'cd' significa 'cambiar directorio'. Con powershell se puede utilizar pwd al igual que en Linux o Mac OS X. 

Probablemente veras algo similar en tu maquina. Una vez que abres la linea de comandos generalmente empiezas en el 
directorio home de tu usuario. 


Listar ficheros y directories 

^Que hay aqui? Seria bueno saber. Veamos: 

List files and directories: OS X and Linux 

command-line 


$ Is 

Applications 

Desktop 

Downloads 

Music 


List files and directories: Windows 

command-line 


> dir 

Directory of C:\Users\olasitarska 
05/08/2014 07:28 PM <DIR> Applications 
05/08/2014 07:28 PM <DIR> Desktop 
05/08/2014 07:28 PM <DIR> Downloads 
05/08/2014 07:28 PM <DIR> Music 


Nota: En powershell tambien puedes utilizar 'Is' como en Linux y Mac OS X. 


Cambia el directorio actual 

Ahora, vayamos a nuestro directorio Desktop, el escritorio: 

Change current directory: OS X and Linux 

command-line 

$ cd Desktop 


Change current directory: Windows 

command-line 

> cd Desktop 


Comprueba si realmente ha cambiado: 

Check if changed: OS X and Linux 
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command-line 


$ pwd 

/Users/olasitarska/Desktop 


Check if changed: Windows 

command-line 


> cd 

C:\Users\olasitarska\Desktop 


jAqui esta! 

Truco pro: si escribes cd d y luego pulsas tab en el teclado, la linea de comandos automaticamente completara 
el resto del nombre para que puedas navegar mas rapido. Si hay mas de una carpeta que empiece con "D", dale al 
boton tab dos veces para obtener una lista de opciones. 


Crear directorio 

^Que tal si creamos un directorio de practica en el escritorio? Lo puedes hacer de esta manera: 

Create directory: OS X and Linux 

command-line 


$ mkdir practice 


Create directory: Windows 

command-line 


> mkdir practice 


Este pequeno comando creara una carpeta con el nombre practice en el escritorio. Puedes comprobar que 
efectivamente esta alii mirando en tu Escritorio o ejecutando un comando is o dir . jlntentalo! :) 

Truco pro: Si no quieres escribir una y otra vez los mismos comandos, prueba pulsando la fiecha arriba y la 
fiecha abajo de tu teclado para ir pasando por los comandos utilizados recientemente. 


jEjercicios! 

Un pequeno reto para ti: en el directorio practice que acabas de crear crea un directorio llamado test . (Utiliza los 
Comandos cd y mkdir .) 


Solucion: 

Exercise solution: OS X and Linux 

command-line 


$ cd practice 
$ mkdir test 
$ Is 
test 
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Exercise solution: Windows 

command-line 


> cd practice 

> mkdir test 

> dir 

05/08/2014 07:28 PM <DIR> test 


jEnhorabuena! :) 


Limpieza 

No queremos dejar un Ho, as! que vamos a eliminar todo lo que hemos hecho hasta este momento. 
En primer lugar, tenemos que volver al escritorio: 

Clean up: OS X and Linux 

command-line 

$ cd . . 


Clean up: Windows 

command-line 

> cd . . 


Usar .. con el comando cd hara que cambie el directorio actual al directorio padre (el que contiene el directorio actual). 
Revisa donde estas: 

Check location: OS X and Linux 

command-line 

$ pwd 

/Users/olasitarska/Desktop 

Check location: Windows 

command-line 

> cd 

C:\Users\olasitarska\Desktop 

Es el momento de eliminar el directorio practice : 

Atencion: Eliminar archivos utilizando del , rmdir o rm hace que no puedan recuperarse, lo que significa que los 
archivos borrados desapareceran para siempre\ As! que ten mucho cuidado con este comando. 

Delete directory: Windows Powershell, OS Xand Linux 

command-line 

$ rm -r practice 


Delete directory: Windows Command Prompt 
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command-line 


> rmdir /S practice 
practice, Are you sure <Y/N>? Y 


jHecho! Para asegurarnos de que realmente se ha eliminado, vamos a comprobarlo: 

Check deletion: OS X and Linux 

command-line 


$ Is 


Check deletion: Windows 

command-line 


> dir 


Salida 

Esto es todo por ahora! Ya puedes cerrar la linea de comandos sin problema. Vamos a hacerlo al estilo hacker, ^vale? :) 

Exit: OS X and Linux 

command-line 

$ exit 

Exit: Windows 

command-line 

> exit 


Genial, ino? :) 

Resumen 

Aqui hay una lista de algunos comandos utiles: 
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Comando 

(Windows) 

Comando (Mac OS / 
Linux) 

Description 

Ejemplo 

salida 

salida 

Cierra la ventana 

salida 

cd 

cd 

Cambia el directorio 

cd test 

cd 

pwd 

Mostrar el directorio 
actual 

cd (Windows) o pwd (Mac OS / 

Linux) 

dir 

Is 

Lista 

directorios/archivos 

dir 

copy 

cp 

Copia de archivos 

copy c:\test\test.txt 
c:\windows\test.txt 

move 

mv 

Mueve archivos 

move c:\test\test.txt 
c:\windows\test.txt 

mkdir 

mkdir 

Crea un nuevo 
directorio 

mkdir testdirectory 

rmdir (o del) 

rm 

Eliminar un archivo 

del c:\test\test.txt 

rmdir IS 

rm -r 

Eliminar un Directorio 

rm -r testdirectory 


Estos son solo unos pocos de los comandos que se pueden ejecutar en la linea de comandos, pero hoy no vas a utilizar 
ninguno mas. 

Si tienes curiosidad, ss64.com contiene una referenda completa de comandos para todos los sistemas operativos. 


<j,Listo? 

jVamos a sumergirnos en Python! 
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Vamos a empezar con Python 


jPor fin estamos aqui! 

Pero primero, dejanos decide que es Python. Python es un lenguaje de programacion muy popular que puede ser usado 
para crear sitios web, juegos, software cientifico, graficos, y mas, mucho mas. 

Python se origino en la decada de 1980 y su principal objetivo es ser legible por los seres humanos (jno solo por 
maquinasl). Por esta razon parece mucho mas sencillo que otros lenguajes de programacion, pero no te preocupes - 
jPython tambien es realmente poderoso! 


Instalacion de Python 


Nota Si usas un Chromebook, omite este capitulo y asegurate de seguir las instrucciones de Chromebook Setup. 

Nota Si ya has seguido los pasos de instalacion, no hay necesidad de hacerlo nuevamente - jpuedes saltar y 
continuar al siguiente capitulo! 

Para lectores en casa: este capitulo se cubre en el video Installing Python & Code Editor. 

Esta seccion esta basada en un tutorial de Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) 

Django esta escrito en Python. Necesitamos Python para hacer cualquier cosa en Django. Comencemos instalandolo!. 
Tenemos que instalar Python 3.6, asi que si tienes una version anterior, debes actualizarla. 

Install Python: Windows 

Primero comprueba si tu computador tiene una version de Windows de 32-bit o 64-bit, presiona tecla Windows + 
Pause/Break, esto abrira tu System info (informacion de tu sistema), ahora busta la linea "System type". Puedes descargar 
Python para Windows desde el sitio web https://www.python.org/downloads/windows/. Haz click en el link "Latest Python 3 
release - Python x.x.x.". Si tu computador tiene una version de Windows de 64 bits, descarga Windows x86-64 
executable installer. De lo contrario, descarga Windows x86 executable installer. Despues de descargar el instalador, 
debes ejecutarlo (hazle doble click) y sigue las instrucciones. 

Algo a tener en cuenta: Durante la instalacion notaras una ventana llamada "Setup". Asegurate de seleccionar la casilla 
"Add Python 3.6 to Path" y luego haz click en "Install Now", como se muestra a continuation: 
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Python 3.6.1 (64-bit) Setup — □ X 

Install Python 3.6.1 (64-bit) 

Select Install Now to install Python with default settings, or choose 
Customize to enable or disable features. 




£ Install Now 

C:\Users\ User \AppData\Local\Programs\Python\Python36 

Includes IDLE, pip and documentation 
Creates shortcuts and file associations 


—> Customize installation 

Choose location and features 


python 

for 

windows 


0 Install launcher for all users (recommended) 
0 Add Python 3.6 to PATH 


Cancel 


En los proximos pasos, vas a utilizar la linea de comandos de Windows (acerca de la cual tambien de contaremos algo). 
De momento, si tienes que teclear algunos comandos, ve al menu de Inicio y teclea "Command Prompt" en el cuadro de 
busqueda. (En versiones anteriores de Windows, puedes arrancar la linea de comandos con menu de Inicio —> Sistema 
Windows —> Linea de Comandos.) Tambien puedes pulsar la tecla "Windows" + R hasta que aparezca la ventana 
"Ejecutar" (Run). Para abrir la linea de comandos, escribe "cmd" y pulsa enter en la ventana "Run". 



Nota: Si estas utilizando una version anterior de Windows (7, Vista, o cualquier version anterior) y el instalador de Python 
3.6.x falla con un error, puedes tratar ya sea: 

1. instalar todas las actualizaciones de Windows e intentar instalar Python 3.6 nuevamente; o 

2. instalar una version de Python anterior, por ejemplo, 3.4.6. 

Si instalas una version anterior de Python, la pantalla de instalacion puede ser un poco diferente a la que se muestra 
arriba. Asegurate de desplazarte hacia abajo para ver "Add python.exe to Path", y dar click en el boton a la izquierda y 
seleccionar "Will be installed on local hard drive": 
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Install Python: OS X 

Nota Antes de instalar Python en OS X, debes asegurarte de que la configuracion del Mac permita instalar paquetes 
que no esten en la App Store, ve a preferencias del sistema (System Preferences, esta en la carpeta Aplicaciones), 
da click en "Seguridad y privacidad" (Security & Privacy) y luego la pestana "General". Si tu "Permitir aplicaciones 
descargadas desde:" (Allow apps downloaded from:) esta establecida a "Mac App Store," cambia a "Mac App Store 
y desarrolladores identificados." (Mac App Store and identified developers) 

Debes ir al sitio web https://www.python.org/downloads/release/python-361/ y descargar el instalador de Python: 

• Descargar el archivo Mac OS X 64-bit/32-bit installer, 

• Haz doble clic en python-3.4.3-macosx10.6.pkg para ejecutar al instalador. 

Install Python: Linux 

Es muy posible que ya tengas Python instalado de serie. Para verificar que ya lo tienes instalado (y que version es), abre 
una consola y escribe el siguiente comando: 

command-line 


$ python3 --version 
Python 3.6.1 


Si tienes una 'micro version' diferente de Python instalada, por ejemplo 3.6.0, entonces no tienes que actualizar. Si no 
tienes instalado Python o si deseas una version diferente, puedes instalarla de la siguiente manera: 

Install Python: Debian or Ubuntu 

Escribe este comando en tu consola: 

command-line 

$ sudo apt install python3.6 


Install Python: Fedora 
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Usa este comando en tu consola: 
command-line 

$ sudo dnf instalar python3 


En versiones anteriores de Fedora tal vez te saiga un error de que no se encuentra el comando dnf . En ese caso utiliza 
yum en su lugar. 

Install Python: openSUSE 

Usa este comando en tu consola: 

command-line 


$ sudo zypper install python3 


Verifica que la instalacion fue exitosa abriendo una terminal y ejecutando el comando python3 : 
command-line 


$ python3 --version 
Python 3.6.1 


NOTA: Si estas en Windows y recibes un mensaje de error no se encontro python3 , intenta usar python (sin el 3 ) y 
comprueba si todavia es una version de Python 3.6. 


Si tienes alguna duda o si algo salio mal y no sabes como resolverlo - jpide ayuda a tu tutor! A veces las cosas no van bien 
y que es mejor pedir ayuda a alguien con mas experiencia. 
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Editor de codigo 


Para lectores en casa: este capitulo se explica en el video Installing Python & Code Editor. 

Estas a punto de escribir tu primera linea de codigo, asi que jya toca descargar un editor de codigo! 

Nota Si usas un Chromebook, saltate este capitulo y asegurate de seguir las instrucciones de Chromebook Setup. 

Nota Es posible que ya hayas hecho esto en el capitulo de instalacion. Si es asi, jpuedes avanzar directamente al 
siguiente capitulo! 

Hay muchos editores diferentes y la eleccion es principalmente una cuestion de preferencia personal. La mayoria de 
programadores de Python usan IDEs (Entornos de Desarrollo Integrados) complejos pero muy potentes, como PyCharm. 
Sin embargo, como principiante, probablemente no es lo mas aconsejable; nuestras recomendaciones son igualmente 
potentes pero mucho mas simples. 

Abajo presentamos nuestras sugerencias pero, tambien puedes preguntarle a tu mentor cuales son las suyas - sera mas 
facil que te ayude. 

Gedit 

Gedit es un editor de texto de codigo abierto, gratuito, y que esta disponible para todos los sistemas operativos. 

Descargalo aqui 

Sublime Text 3 

Sublime Text es un editor muy popular con un periodo de prueba gratis. Es facil de instalar y de usar, y esta disponible 
para todos los sistemas operativos. 

Descargalo aqui 

Atom 

Atom es otro editor que usa mucha gente. Es gratuito, de codigo abierto y hay versiones para Windows, OS X y Linux. 
Atom ha sido desarrollado por GitHub. 

Descargalo aqui 

<[,Por que estamos instalando un editor de texto? 

Tal vez te estes preguntando por que estamos instalando un editor especializado en codigo, en lugar de usar un editor 
convencional como Word o Notepad. 

La principal razon es que el codigo tiene que ser texto piano y, el problema con programas como Word y Textedit es que 
no guardan texto piano, sino que guardan texto enriquecido (con estilos), usando formatos personalizados como RTF(Rich 
Text Format). 

La segunda razon es que los editores de texto son herramientas especiales para editar codigo, porque tienen 
caracteristicas utiles como resaltar el codigo con diferentes colores de acuerdo a su significado, o cerrar comillas 
automaticamente. 

Veremos todo esto en accion mas adelante. Pronto el editor de codigo se convertira en una de tus herramientas favoritas. 

0 


34 


Editor de codigo 


35 



Introduccion a Python 


Introduccion a Python 


Parte de este capitulo se basa en tutoriales de Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). 

jEscribamos algo de codigo! 

La Consola de Python 

Para los lectores en casa: el video conceptos basicos de Python: enteros, cadenas, listas, variables y errores cubre 
esta parte. 

Para empezar a jugar con Python, tenemos que abrir una linea de comandos en nuestra computadora. Deberias saber 
como hacerlo, pues lo aprendiste en el capitulo de Introduccion a la Linea de Comandos. 

Una vez que estes lista, sigue las instrucciones a continuation. 

Queremos abrir una consola de Python, asi que escribe python en Windows o python3 en Mac OS/Linux y pulsa intro, 
command-line 


$ python3 
Python 3.6.1 (...) 

Type "help", "copyright", "credits" or "license" for more information. 

»> 

jTu primer comando en Python! 

Despues de ejecutar el comando de Python, el cursor cambiara a »> . Para nosotros esto significa que por ahora solo 
podemos utilizar comandos del lenguaje Python. No tienes que escribir e »> pues Python lo hara por ti. 

Si deseas salir de la consola de Python en cualquier momento, solo escribe exit( ) o usa el atajo Ctrl + z para 
Windows y Ctrl + d para Mac/Linux. Luego no veras mas >» . 

Por ahora, no queremos salir de la consola de Python. Deseamos aprender mas sobre ella. Vamos a comenzar 
escribiendo algo de matematica, escribe 2 + 3 y oprime la tecla enter . 

command-line 


»> 2 + 3 
5 

jQue bien! ^Ves como salio la respuesta? jPython sabe matematica! Puedes probar otros comandos como: 

• 4*5 

• 5-1 

• 40/2 

Para realizar una operation exponencial, digamos 2 elevado al cubo, escribimos: 
command-line 

»> 2 ** 3 
8 

Diviertete con esto por un momento y luego vuelve aquf. :) 
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Como puedes ver, Python es una gran calculadora. Si te estas preguntando que mas puedes hacer... 

Cadena de caracteres 

^Que tal tu nombre? Escribe tu nombre entre comillas, asi: 
command-line 


»> "Ola" 
'Ola' 


jHas creado tu primera cadena de texto! La misma es una secuencia de caracteres que puede ser procesada por una 
computadora. La cadena de texto (o string, en ingles) debe comenzar y terminar con el mismo caracter. Pueden ser 
comillas simples ( ' ) o dobles ( " ) (jno hay ninguna diferencia!) Las comillas le dicen a Python que lo que esta dentro de 
ellas es una cadena de texto. 

Las cadenas pueden estar concatenadas. Prueba esto: 
command-line 


»> "Hola " + "Ola" 
'Hola Ola' 


Tambien puedes multiplicar las cadenas por un numero: 
command-line 


»> "Ola" * 3 
'OlaOlaOla' 


Si necesitas poner un apostrofe dentro de una cadena, hay dos formas de hacerlo. 

Usar comillas dobles: 

command-line 


»> "Runnin' down the hill" 
"Runnin' down the hill" 


o escapar el apostrofe con la diagonal inversa ("): 
command-line 


»> 'RunninV down the hill' 
"Runnin' down the hill" 


Bien, <^eh? Para ver tu nombre en letras mayusculas, escribe: 
command-line 

»> "Ola". upper () 

'OLA' 

jAcabas de usar el metodo upper sobre tu cadena de texto! Un metodo (como upper() ) es un conjunto de instrucciones 
que Python tiene que realizar sobre un objeto determinado ( "oia" ) una vez que se le invoca. 

Si quieres saber el numero de letras que contiene tu nombre, jtambien hay una funcion para eso! 
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command-line 


»> len("01a") 

3 

Te preguntaras <;,por que a veces se invoca a las funciones con un . al final de una cadena (como "oia" .upper () )ya 
veces se invoca a la funcion colocando la cadena entre parentesis? Bueno, en algunos casos las funciones pertenecen a 
los objetos, como upper( ) , que solo puede ser utilizada sobre cadenas. En este caso, a la funcion le llamamos metodo. 
Otra veces, las funciones no pertenecen a ningun objeto especifico y pueden ser usadas en diferentes objetos, como 
ien( ) . Esta es la razon de por que estamos pasando "oia" como un parametro a la funcion len . 

Resumen 

Ok, es suficiente sobre las cadenas. Hasta ahora has aprendido sobre: 

• la terminal - teclear comandos (codigo) en la terminal de Python resulta en respuestas de Python 

• numeros y strings - en Python los numeros son usados para matematicas y strings (cadenas de caracteres) para 
objetos de texto 

• operadores - como + y * , combinan valores para producir uno nuevo 

• funciones - como upper() y ien( ), ejecutan acciones sobre los objetos. 

Estos son los conocimientos basicos que puedes aprender de cualquier lenguaje de programacion. ^Lista para algo mas 
dificil? jSeguro que lo estas! 


Errores 

Vamos a intentar algo nuevo. ^Podemos obtener la longitud de un numero de la misma manera que pudimos averiguar la 
longitud de nuestro nombre? Escribe ien(304023) y pulsa enter: 

PythonAnywhere command-line 

»> len (304023) 

Traceback (most recent call last): 

File "<stdin>", line 1, in <module> 

TypeError: object of type 'int' has no len() 


jPues tenemos nuestro primer error! El icono de es nuestra manera de darte un aviso de que el codigo que estas 
ejecutando no funciona como se espera. jCometer errores (incluso algunos intencionales) son una parte importante del 
aprendizaje! 

Dicho error dice que los objetos de tipo "int" (numeros enteros) no tienen longitud. <[,Que podemos hacer ahora? ^Quizas 
podamos escribir el numero como una cadena? Las cadenas tienen longitud, ^.verdad? 

command-line 

»> len(str(304023)) 

6 

jFunciono! Hemos utilizado la funcion str dentro de la funcion len . str () convierte todo en cadenas de texto. 

• La funcion str convierte cosas en cadenas, strings 

• La funcion int convierte cosas en enteros, integers 

Importante: podemos convertir numeros en texto, pero no necesariamente podemos convertir texto en numeros - 
<^que seria int('hello 1 ) ? 
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Variables 

Un concepto importante en la programacion son las variables. Una variable no es mas que un nombre para algo, de forma 
que puedas usarlo mas tarde. Los programadores usan estas variables para almacenar datos, hacer su codigo mas legible 
y para no tener que recordar que es cada cosa. 

Supongamos que queremos crear una nueva variable llamada name : 

command-line 


»> name = "Ola" 


Tecleamos que nombre es igual a Ola. 

Como habras notado, tu programa no devolvio nada como lo hacia antes. Asi que ^como sabemos que la variable existe 
realmente? Escribe name y pulsa intro : 

command-line 

»> name 
'Ola' 


jGenial! jTu primera variable :)! Siempre puedes cambiar a lo que se refiere: 
command-line 


»> name = "Sonja" 
»> name 
'Sonja' 


Tambien puedes usarla dentro de funciones: 
command-line 


»> len(name) 

5 


Increible, ^verdad? Porsupuesto, las variables pueden ser cualquier cosa, jtambien numeros! Prueba esto: 
command-line 

»> a = 4 
»> b = 6 
»> a * b 
24 


Pero ^que pasa si usamos el nombre equivocado? ^Puedes adivinar que pasarfa? jVamos a probar! 
command-line 


»> city = "Tokyo" 

»> ctiy 

Traceback (most recent call last): 

File "<stdin>", line 1, in <module> 
NameError: name 'ctiy' is not defined 


jUn error! Como puedes ver, Python tiene diferentes tipos de errores y este se llama NameError. Python te dara este error 
si intentas utilizar una variable que no ha sido definida aun. Si mas adelante te encuentras con este error, verifica tu codigo 
para ver si no has escrito mal una variable. 
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jJuega con esto un rato y descubre que puedes hacer! 


La funcion print 

Intenta esto: 
command-line 

»> name = 'Maria' 

»> name 
'Maria' 

»> print(name) 

Maria 


Cuando solo escribes name , el interprete de Python responde con la representation en forma de cadena de la variable 
'name', que son las letras M-a-r-i-a, rodeadas de comillas simples Cuando dices print(name) , Python va a "imprimir" el 
contenido de la variable a la pantalla, sin las comillas, que es mas claro. 

Como veremos despues, print () tambien es util cuando queremos imprimir cosas desde adentro de las funciones, o 
cuando queremos imprimir cosas en multiples lineas. 

Listas 

Ademas de cadenas y enteros, Python tiene toda clase de tipos de objetos diferentes. Ahora vamos a introducir uno 
llamado list. Las listas son exactamente lo que piensas que son: objetos que son listas de otros objetos. :) 

Animate y crea una lista: 

command-line 

»> ti 
[] 

Si, esta lista esta vacia. No es muy util, ^verdad? Vamos a crear una lista de numeros de loteria. No queremos repetirnos 
todo el rato, asi que la pondremos tambien en una variable: 

command-line 

»> lottery = [3, 42, 12, 19, 30, 59] 

Muy bien, jtenemos una lista! <[,Que podemos hacer con ella? Vamos a ver cuantos numeros de loteria hay en la lista. 
^Tienes alguna idea de que funcion deberias usar para eso? jYa lo sabes! 

command-line 

»> len(lottery) 

6 


jSi! ien() puede darte el numero de objetos en una lista. Util, i,verdad? Tal vez la ordenemos ahora: 
command-line 

»> lottery. sort () 


No devuelve nada, solo ha cambiado el orden en que los numeros aparecen en la lista. Vamos a imprimirla otra vez y ver 
que ha pasado: 
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command-line 


»> print(lottery) 

[3, 12, 19, 30, 42, 59] 


Como puedes ver, los numeros de tu lista ahora estan ordenados de menor a mayor. jEnhorabuena! 

^Te gustaria invertir ese orden? jVamos a hacerlo! 

command-line 


»> lottery. reverse() 
»> print(lottery) 

[59, 42, 30, 19, 12, 3] 


Si quieres anadir algo a tu lista, puedes hacerlo escribiendo este comando: 
command-line 


»> lottery.append(199) 

»> print(lottery) 

[59, 42, 30, 19, 12, 3, 199] 


Si deseas mostrarsolo el primer numero, puedes hacerlo mediante el uso de Indexes (en espanol, indices). Un indice es 
el numero que te dice donde en una lista aparece un item. Las programadoras y los programadores prefieren comenzar a 
contar desde 0, por lo tanto el primer objeto en tu lista esta en el indice 0, el proximo esta en el 1, y asi sucesivamente. 
Intenta esto: 

command-line 


»> print(lottery[0]) 

59 

»> print(lottery[l]) 

42 


Como puedes ver, puedes acceder a diferentes objetos en tu lista utilizando el nombre de la lista y el indice del objeto 
dentro de corchetes. 

Para borrar algo de tu lista tendras que usar indices como aprendimos anteriormente y la funcion pop( ) . Vamos a tratar 
de ejemplificar esto y reforzaar lo que aprendimos anteriormente; vamos a borrar el primer numero de nuestra lista. 

command-line 


»> print(lottery) 

[59, 42, 30, 19, 12, 3, 199] 
»> print(lottery[0]) 

59 

»> lottery.pop(0) 

59 

»> print(lottery) 

[42, 30, 19, 12, 3, 199] 


Funciono de maravilla! 

Para diversion adicional, prueba algunos otros indices: 6, 7, 1000, -1,-6 6 -1000. A ver si se puedes predecir el resultado 
antes de intentar el comando. ^Tienen sentido los resultados? 

Puedes encontrar una lista de todos los metodos disponibles para listas en este capitulo de la documentation de Python: 

https://docs.python.Org/3/tutorial/datastructures.html 
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Diccionarios 

Para lectores en casa: este capitulo esta cubierto en el video Bases de Python: Diccionarios. 

Un diccionario es similar a una lista, pero accedes a valores usando una Have en vez de un indice. Una Have puede ser 
cualquier cadena o numero. La sintaxis para definir un diccionario vacio es: 

command-line 

>» O 
{} 

Esto demuestra que acabas de crear un diccionario vacio. jHurra! 

Ahora, trata escribiendo el siguiente comando (intenta reemplazando con tu propia information): 
command-line 

»> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers' : [7, 42, 92]} 

Con este comando, acabas de crear una variable llamada participant con tres pares llave-valor: 

• La Have name apunta al valor 'oia 1 (un objeto string), 

• country apunta a 'Poland 1 (otro string ), 

• y favor it e_numbers apunta a [i, 42 , 92 ] (una list con tres numeros en ella). 

Puedes verificar el contenido de claves individuales con esta sintaxis: 
command-line 

»> print (participant [' name' ]) 

Ola 


Lo ves, es similar a una lista. Pero no necesitas recordar el indice - solo el nombre. 

<^Que pasa si le pedimos a Python el valor de una clave que no existe? ^Puedes adivinar? jPruebalo y veras! 
command-line 

»> participant [' age' ] 

Traceback (most recent call last): 

File "<stdin>", line 1, in <module> 

KeyError: 'age' 


jMira, otro error! Este es un KeyError. Python te ayuda y te dice que la Have 'age 1 no existe en este diccionario. 

i,Cuando deberias usar un diccionario o una lista? Bueno, es un buen punto para reflexionar. Piensa sobre la respuesta, 
antes de mirar una solution en la siguiente linea. 

• ^Solo necesitas una secuencia ordenada de elementos? Usa una lista. 

• ^Necesitas asociar valores con claves, asi puedes buscarlos eficientemente (usando las claves) mas adelante? Utiliza 
un diccionario. 

Los diccionarios, como las listas, son mutables, lo que quiere decir que pueden ser modificados despues de ser creados. 
Puedes agregar nuevos pares llave/valor a un diccionario luego de crearlo, como: 

command-line 

»> participant[' favorite_language' ] = 'Python' 
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Como las listas, usando el metodo ien( ) en los diccionarios devulven el numero de pares llave-valor en el diccionarlo. 
Adelante escribe el comando: 

command-line 

»> len(participant) 

4 

Espero tenga sentido hasta ahora.:) ^Listo para mas diversion con diccionarios? Salta a la siguiente linea para algunas 
cosas sorprendentes. 

Puedes utilizar el comando pop( ) para borrar un elemento en el diccionario. Por ejemplo, si deseas eliminar la entrada 
correspondiente a la clave 'favoritejumbers' , tienes que escribirel siguiente comando: 

command-line 


»> participant.pop(' favorite_numbers' ) 

[7, 42, 92] 

»> participant 

{'country': 'Poland', 'favorite_language' : 'Python', 'name': 'Ola'} 


Como puedes ver en la salida, el par de llave-valor correspondiente a la Nave 'favorite_numbers' ha sido eliminado. 
Ademas de esto, tambien puedes cambiar un valor asociado a una Nave ya creada en el diccionario. Escribe: 
command-line 


»> participant[ 'country' ] = 'Germany' 

»> participant 

{'country': 'Germany', 'favorite_language' : 'Python', 'name': 'Ola'} 


Como puedes ver, el valor de la Nave 'country' ha sido modificado de 'Poland 1 a 'Germany' .:) ^Emocionante? jHurra! 
Has aprendido otra cosa asombrosa. 

Resumen 

jGenial! Sabes mucho sobre programacion ahora. En esta ultima parte aprendiste sobre: 

• errores - ahora sabes como leer y entender los errores que aparecen si Python no entiende un comando 

• variables - nombres para los objetos que te permiten codificar mas facilmente y hacer el codigo mas legible 

• listas - listas de objetos almacenados en un orden determinado 

• diccionarios - objetos almacenados como pares llave-valor 

(•.Emocionada por la siguiente parte? :) 


Compara cosas 

Para lectores en casa: este capitulo esta cubierto en el video Bases de Python: Comparaciones. 

Buena parte de la programacion incluye comparar cosas. <[,Que es lo mas facil para comparar? Numeros, por supuesto. 
Vamos a ver como funciona: 

command-line 
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»> 5 > 2 
True 

»> 3 < 1 
False 

»> 5 > 2 * 2 
True 

»> i == i 

True 

»> 5 != 2 
True 


Le dimos a Python algunos numeros para comparar. Como puedes ver, Python no solo puede comparar numeros, sino que 
tambien puede comparar resultados de funciones. Bien, <^eh? 

^Te preguntas por que pusimos dos signos igual == al lado del otro para comparar si los numeros son iguales? 

Utilizamos un solo = para asignar valores a las variables. Siempre, siempre es necesario poner dos == Si deseas 
comprobar que las cosas son iguales entre si. Tambien podemos afirmar que las cosas no son iguales a otras. Para eso, 
utilizamos el simbolo != , como mostramos en el ejemplo anterior. 

Da dos tareas mas a Python: 

command-line 

»> 6 >= 12 / 2 
True 

»> 3 <= 2 
False 


Hemos visto > y < , pero, <[,que significan >= y <= ? Los puedes leer asi: 

• x > y significa: x es mayor que y 

• x < y significa: x es menor que y 

• x <= y significa: x es menor o igual que y 

• x >= y significa: x es mayor o igual que y 

jGenial! i,Quieres hacer uno mas? Intenta esto: 
command-line 

»> 6 > 2 and 2 < 3 
True 

»> 3 > 2 and 2 < 1 
False 

»> 3 > 2 or 2 < 1 
True 


Puedes darle a Python todos los numeros para comparar que quieras, y siempre te dara una respuesta. Muy inteligente, 
^.verdad? 

• and - si utilizas el operador and , ambas comparaciones deben ser True para que el resultado de todo el comando 
sea True 

• or - si utilizas el operador or , solo una de las comparaciones tiene que ser True para que el resultado de todo el 
comando sea True 

<i,Has oido la expresion "comparar manzanas con naranjas"? Vamos a probar el equivalente en Python: 
command-line 


»> 1 > 'django 1 

Traceback (most recent call last): 

File "<stdin>", line 1, in <module> 

TypeError: '>' not supported between instances of 'int' and 'str' 
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Aqui veras que al igual que en la expresion, Python no es capaz de comparar un numero ( int ) y un string ( str ). En 
cambio, muestra un TypeError y nos dice que los dos tipos no se pueden comparar. 

Boolean 

Incidentalmente, acabas de aprender sobre un nuevo tipo de objeto en Python. Se llama Boolean (booleano). 

Hay solo dos objetos booleanos: 

• True - verdadero 

• False - falso 

Pero para que Python entienda esto, siempre los tienes que escribir de modo 'True' (la primera letra en mayuscula, con el 
resto de las letras en minuscula). true, TRUE, y tRUE no funcionaran - solamente True es correcta. (Lo mismo aplica 
tambien para 'False'.) 

Los valores booleanos pueden ser variables, tambien. Ve el siguiente ejemplo: 
command-line 


»> a = True 
»> a 
True 


Tambien puedes hacerlo de esta manera: 
command-line 


»> a = 2 > 5 
»> a 
False 


Practica y diviertete con los booleanos ejecutando los siguientes comandos: 

• True and True 

• False and True 

• True or 1 == 1 

• 1 != 2 

iFelicidades! Los booleanos son una de las funciones mas geniales en programacion y acabas de aprender como usarlos. 


jGuardalo! 


Para lectores en casa: este capitulo esta cubierto en el video Bases de Python: Guardando archivos y 
condicionales. 

Hasta ahora hemos escrito todo nuestro codigo Python en el interprete, lo cual nos limita a ingresar una linea de codigo a 
la vez. Normalmente los programas son guardados en archivos y son ejecutados por el interprete o compilador de 
nuestro lenguaje de programacion. Hasta ahora, hemos estado corriendo nuestros programas de a una linea por vez en el 
interprete de Python. Necesitaremos mas de una linea de codigo para las siguientes tareas, entonces necesitaremos 
hacer rapidamente lo que sigue: 

• Salir del interprete de Python 

• Abrir el editor de texto de nuestra election 

• Guardar algo de codigo en un nuevo archivo de Python 

• jEjecutarlo! 

Para salir del interprete de Python que hemos estado usando, escribe exit() 
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command-line 

»> exit() 

$ 

Esto te llevara de vuelta a la linea de comandos. 

Anteriormente, elegimos un editor de codigo en la seccion de Editor de codigo. Tendremos que abrir el editor ahora y 
escribir algo de codigo en un archivo nuevo: 

editor 

print( 1 Hello, Django girls!') 


Obviamente, ahora eres una desarrolladora Python muy experimentada, asi que sintete libre de escribir algo del codigo 
que has aprendido hoy. 

Ahora tenemos que guardar el archivo y asignarle un nombre descriptivo. Vamos a llamar al archivo python_intro.py y 
guardarlo en tu escritorio. Podemos nombrar el archivo como queramos, pero la parte importante es asegurarse de que 
termina en .py. La extension .py le dice a nuestro sistema operativo que es un archivo ejecutable de python y Python lo 
puede ejecutar. 

Nota Deberias notar una de las cosas mas geniales de los editores de codigo: jlos colores! En la consola de Python, 
todo era del mismo color, ahora deberias ver que la funcion print es de un color diferente a la cadena en su 
interior. Esto de denomina "sintaxis resaltada", y es una caracteristica muy util cuando se programa. El color de las 
cosas te dara pistas, como cadenas no cerradas o errores tipograficos en un nombre clave (como def en una 
funcion, que veremos a continuation). Esta es una de las razones por las cuales usar un editor de codigo. :) 

Con el archivo guardado, jes hora de ejecutarlo! Utilizando las habilidades que has aprendido en la seccion de linea de 
comandos, utiliza la terminal para cambiar los directorios e ir al escritorio. 

Change directory: OS X 

En una Mac, el comando se vera algo como esto: 
command-line 

$ cd -/Desktop 


Change directory: Linux 

En Linux, va a ser asi (la palabra "Desktop" puede estar traducida a tu idioma, escritorio en espanol): 
command-line 

$ cd -/Desktop 


Change directory: Windows Command Prompt 

En Command Prompt en windows, sera asi: 

command-line 

> cd %HomePath%\Desktop 


Change directory: Windows Powershell 

Y en Powershell, sera asi: 

command-line 
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> cd $Home\Desktop 


Si te atoras, pide ayuda. jJusto para eso estan aqui los asesores! 
Ahora usa Python para ejecutar el codigo en el archivo asi: 
command-line 


$ python3 python_intro.py 
Hello, Django girls! 


Nota: En Windows 'python3' no es reconocido como comando. En vez usa 'python' para ejecutar el archivo: 
command-line 


> python python_intro.py 


jMuy bien! Ejecutaste tu primer programa de Python desde un archivo. i,Te sientes increible? 

Ahora puedes moverte a una herramienta esencial en la programacion: 

If ... elif ... else 

Un monton de cosas en el codigo solo deberian ser ejecutadas cuando se cumplan ciertas condiciones. Por eso Python 
tiene algo llamado sentenclas if. 

Reemplaza el codigo en tu archivo python_intro.py con esto: 
pythonjntro.py 

if 3 > 2: 


Si lo guardaramos y lo ejecutaramos, veriamos un error como este: 
command-line 


$ python3 python_intro.py 
File "python_intro.py", line 2 

A 

SyntaxError: unexpected EOF while parsing 


Python espera que le demos mas instrucciones las cuales se ejecutan si la condicion 3 > 2 es verdadera (o True ). 
Intentemos hacer que Python imprima "It works!". Cambia tu codigo en el archivo pythonjntro.py para que se vea como 
esto: 

pythonjntro.py 


if 3 > 2 : 

print('It works!' ) 


^Observas como hemos indentado la siguiente linea de codigo con 4 espacios? Necesitamos hacer esto para que Python 
sepa que codigo ejecutar cuando la condicion es verdadera. Podrias poner un solo espacio, pero casi todas las 
programadores y programadores de Python ponen 4 espacios para que el codigo sea mas legible. Un tabulador tambien 
cuenta como 4 espacios (dependiendo de la configuration de tu editor). Elige una forma para indentar, jy hazlo siempre 
igual! Si ya has indentado el codigo con 4 espacios, hazlo siempre igual. Es importante que la indentation del codigo sea 
consistente para evitar problemas. 
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Guardalo y ejecutalo de nuevo: 
command-line 


$ python3 python_intro.py 
It works! 


Nota: Recuerda que en Windows, 'python3' no es reconocido como comando. De ahora en adelante, reemplaza 'python3' 
con 'python' para ejecutar el archivo. 


^Que pasa si una condicion no es verdadera? 

En ejemplos anteriores, el codigo fue ejecutado solo cuando las condiciones eran ciertas. Pero Python tambien tiene 
declaraciones eiif y else : 

pythonjntro.py 


if 5 > 2: 

print('5 is indeed greater than 2') 
else: 

print('5 is not greater than 2') 


Cuando esto se ejecute imprimira: 
command-line 


$ python3 python_intro.py 
5 is indeed greater than 2 


Si 2 fuera mayor que 5, entonces se ejecutaria el segundo comando. Vamos a ver como funciona eiif : 
pythonjntro.py 

name = 'Sonja' 
if name == 'Ola': 

print(' Hey Ola!' ) 
eiif name == 'Sonja': 

print(' Hey Sonja!' ) 
else: 

print ('Hey anonymous!') 


y al ejecutarlo: 
command-line 


$ python3 python_intro.py 
Hey Sonja! 


^.Ves lo que paso alii? eiif te permite agregar condiciones adicionales que se ejecutan si la condicion previa falla. 
Puede agregar tantas sentencias eiif como quieras despues de la sentencia if inicial. Por ejemplo: 
pythonjntro.py 
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volume = 57 
if volume < 20: 

print("It's kinda quiet.") 
elif 20 <= volume < 40: 

print("It's nice for background music") 
elif 40 <= volume < 60: 

print( "Perfect, I can hear all the details") 
elif 60 <= volume < 80: 

print("Nice for parties") 
elif 80 <= volume < 100: 

print( "A bit loud!" ) 
else: 

print("Me duelen las orejas! :(") 


Python corre a traves de cada prueba en secuencia e imprime: 
command-line 


$ python3 python_intro.py 
Perfect, I can hear all the details 


Comentarios 

Las lineas que empiezan por # son comentarios. Puedes escribir lo que quieres detras del # y Python lo ignorara. Los 
comentarios sirven para explicar el codigo a la gente que lo lea en el futuro (jo incluso a ti mismal). 

Aver que pinta tiene: 

pythonjntro.py 


# Cambiar el volumen si esta muy alto o muy bajo 

if volume < 20 or volume > 80: 
volume = 50 
print("Mucho mejor!") 


No es necesario que escribas un comentario por cada linea de codigo, pero son muy utiles para explicar por que tu codigo 
hace algo, o para resumir cuando esta haciendo algo complejo. 

Resumen 

En los ultimos tres ejercicios aprendiste acerca de: 

• Comparar cosas - en Python puedes comparar cosas haciendo uso de >,>=,==,<=,< y de los operatores 

and y or 

• Boolean - un tipo de objeto que solo puede tener uno de dos valores: True o False 

• Guardar archivos - almacenar codigo en archivos para que puedas ejecutar programas mas grandes. 

• if... elif... else - sentencias que te permiten ejecutar codigo solo cuando se cumplen ciertas condiciones. 

• comentarios - lineas que Python no ejecutara que permiten documentar el codigo 

jEs hora de leer la ultima parte de este capitulo! 

jTus propias funciones! 

Para lectores en casa: este capitulo esta cubierto en el video Bases de Python: Funciones. 

^.Recuerdas funciones como ien( ) que puedes ejecutar en Python? Bueno, te tenemos buenas noticias, jahora 
aprenderas a escribir tus propias funciones! 
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Una funcion es una secuencia de instrucciones que Python debe ejecutar. Cada funcion en Python comienza con la 
palabra clave def , se le asigna un nombre y puede tener algunos parametros. Vamos a probar. Reemplaza el codigo en 
python_intro.py con lo siguiente: 

pythonjntro.py 


def hi( ) : 

print( 1 Hi there!' ) 
print ('How are you? 1 ) 


hio 


Bien, jnuestra primera funcion esta lista! 

Te preguntaras por que hemos escrito el nombre de la funcion en la parte inferior del archivo. Esto es porque Python lee el 
archivo y lo ejecuta desde arriba hacia abajo. Asi que para poder utilizar nuestra funcion, tenemos que reescribir su 
nombre en la parte inferior. 

Ejecutemos esto y veamos que sucede: 

command-line 

$ python3 python_intro.py 
Hi there! 

How are you? 


Nota: Si no funciono, no te preocupes! La salida le ayudara a entender por que: 

• Si te sale NameError , probablemente significa que escribiste algo mal, asi que deberias comprobar si utilizaste el 
mismo nombre para crear la funcion con defhi(): y al llamarla con hi() . 

• Si te sale un indentationError , comprueba que las lineas del print tienen el mismo espacio en bianco al comienzo 
de linea: python requiere que todo el codigo dentro de la funcion este perfectamente alineado. 

• Si no hay ninguna salida, comprueba que el ultimo h±( ) no este identado - si lo esta, esa linea tambien sera parte de 
la funcion, y nunca se ejecutara. 

Escribamos nuestra primera funcion con parametros. Usaremos el ejemplo anterior - una funcion que dice 'hi' a la persona 
ejecutandola - con un nombre: 

pythonjntro.py 


def hi(name) : 


Como puedes ver, ahora dimos a nuestra funcion un parametro que llamamos name : 
pythonjntro.py 


def hi(name) : 

if name == 'Ola' : 

print( 'Hi Ola!' ) 
elif name == 'Sonja': 

print(' Hi Sonja!' ) 
else : 

print('Hi anonymous!') 


hio 


Recuerda: La funcion print esta indentada cuatro espacios dentro del if . Esto es porque la funcion corre cuando la 
condition se cumple. Veremos como funciona ahora: 

command-line 
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$ python3 python_intro.py 
Traceback (most recent call last): 

File "python_intro.py", line 10, in <module> 

hi() 

TypeError: hi() missing 1 required positional argument: 'name' 

Oops, un error. Por suerte, Python nos da un mensaje de error bastante util. Nos dice que la funcion hi( ) (la que 
definimos) tiene un argumento requerido (llamado name ) y que se nos olvido pasarlo al llamar a la funcion. Vamos a 
arreglarlo en la parte inferior del archivo: 

pythonjntro.py 


hi( "Ola" ) 


Y lo ejecutamos de nuevo: 
command-line 


$ python3 python_intro.py 
Hi Ola! 


<^Y si cambiamos el nombre? 
pythonjntro.py 

hi( "Sonja" ) 


Y lo ejecutamos: 
command-line 


$ python3 python_intro.py 
Hi Sonja! 


Ahora, ^que crees que suceda si escribes otro nombre ahi? (No Ola ni Sonja) Intentalo y ve si tienes razon. Deberia 
imprimir esto: 

command-line 


Hi anonymous! 


Esto es increible, ^.verdad? De esta forma no tienes que repetir todo cada vez que deseas cambiar el nombre de la 
persona a la que la funcion deberia saludar. Y esa es exactamente la razon por la que necesitamos funciones - jpara no 
repetir tu codigo! 

Vamos a hacer algo mas inteligente - hay mas de dos nombres, y escribir una condition para cada uno seria dificil, ^no? 
pythonjntro.py 


def hi(name) : 

print(' Hi ' + name + '! 1 ) 

hi( "Rachel" ) 

Ahora vamos a llamar al codigo: 
command-line 
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$ python3 python_intro.py 
Hi Rachel! 


iFelicidades! Acabas de aprender como escribir funciones :) 

Bucles 

Para lectores en casa: este capitulo esta cubierto en el video Python Basics: For Loop. 

Esta es la ultima parte. jQue rapido! <^no? :) 

A las programadoras no les gusta repetirse a si mismas. Programar es sobre automatizar cosas, entonces no queremos 
saludar a cada persona por su nombre manualmente, ^no? Ahi es donde los loops son utiles. 

^Todavia recuerdas las listas? Hagamos una lista de las chicas: 

pythonjntro.py 

girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] 

Queremos saludar a todas ellas por su nombre. Tenemos la funcion hi que hace eso, asi que vamos a usarla en un 
bucle: 

pythonjntro.py 

for name in girls: 


La sentencia for funciona de forma parecida a la sentencia if ; el codigo de dentro tiene que estar indentado con 
cuatro espacios en ambas. 

Aqui esta el codigo completo que estara en el archivo: 
pythonjntro.py 


def hi(name): 

print(' Hi ' + name + ' !' ) 


girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] 
for name in girls: 
hi(name) 

print(' Next girl' ) 


Y cuando lo ejecutamos: 
command-line 


$ python3 python_intro.py 
Hi Rachel! 

Next girl 
Hi Monica! 

Next girl 
Hi Phoebe! 

Next girl 
Hi Ola! 

Next girl 
Hi You! 

Next girl 


Como puedes ver, todo lo que pones con una indentation dentro de una sentencia for sera repetido para cada elemento 
de la lista girls . 
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Tambien se puede usar for con numeros, usando la funcion range : 
pythonjntro.py 


for i in range(l, 6): 
print(i) 


Lo que imprimira: 
command-line 

1 

2 

3 

4 

5 

range es una funcion que crea una lista de numeros en serie (estos numeros son proporcionados por ti como 
parametros). 

Ten en cuenta que el segundo de estos dos numeros no sera incluido en la lista que retornara Python (es decir, range(i, 
6) cuenta desde 1 a 5, pero no incluye el numero 6). Eso pasa porque "range" esta medio-abierto, y con eso queremos 
decir que incluye el primer valor, pero no el ultimo. 

Resumen 

Eso es todo. jEres genial! Este fue un capitulo dificil, por lo que debes sentirte orgullosa de ti misma. jNosotras estamos 
orgullosas de ti porque has llegado lejos! 

Si quieres ver un tutorial de Python oficial y completo, puedes visitar https://docs.python.Org/3/tutorial/. Este tutorial te 
ensenara conocimientos mas completos y detallados del lenguaje. jBravo! :) 

Tal vez quieras hacer algo distinto por un momento - estirarte, caminar un poco, descansar tus ojos - antes de pasar al 
siguiente capitulo. :) 
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<5,Que es Django? 


Django (gdhf d^aeqgou/jang-goh) es un framework de aplicaciones web gratuito y de codigo abierto (open source) escrito 
en Python. Un framework web es un conjunto de componentes que te ayudan a desarrollar sitios web mas facil y 
rapidamente. 

Cuando construyes un sitio web, siempre necesitas un conjunto de componentes similares: una manera de manejar la 
autenticacion de usuarios (registrarse, iniciar sesion, cerrar sesion), un panel de administracion para tu sitio web, 
formularios, una forma de subir archivos, etc. 

Por suerte para nosotros, hace tiempo que otros desarrolladores se dieron cuenta de que siempre se enfrentaban a los 
mismos problemas cuando construian sitios web, y por eso se unieron y crearon frameworks (Django es uno de ellos) con 
componentes listos para usarse. 

Los frameworks sirven para que no tengamos que reinventar la rueda cada vez y que podamos avanzar mas rapido al 
construir un nuevo sitio. 

<j,Por que necesitas un framework? 

Para entender para que sirve realmente Django, necesitamos fijarnos en como funcionan los servidores. Lo primero es que 
el servidor necesita enterarse de que tu quieres que te sirva una pagina web. 

Imagina un buzon (puerto) en el que alguien esta constantemente mirando si hay cartas entrantes (peticiones). Esto es lo 
que hace un servidor web. El servidor web lee la carta, y envia una respuesta con la pagina web. Pero para enviar algo, 
tenemos que tener algun contenido. Y Django nos ayuda a crear ese contenido. 

i,Que sucede cuando alguien solicita una pagina web de tu 
servidor? 

Cuando llega una peticion a un servidor web, es pasada a Django quien intenta averiguar que es realmente solicitado. 
Toma primero una direccion de pagina web e intenta averiguar que hacer. Esta parte es realizada por el urlresolver de 
Django (ten en cuenta que la direccion de un sitio web es llamada URL - Uniform Resource Locator; asi que el nombre 
urlresolver tiene sentido). Este no es muy inteligente - toma una lista de patrones y trata de hacer coincidir la URL. Django 
comprueba los patrones de arriba hacia abajo y si algo coincide entonces Django le pasa la solicitud a la funcion asociada 
(que se llama view (vista)). 

Imagina a un cartero llevando una carta. El esta caminando por la calle y comprueba cada numero de casa con el que esta 
en la carta. Si coincide, deja la carta alii. Asi es como funciona el urlresolver! 

En la funcion de view (vista) se hacen todas las cosas interesantes: podemos mirar a una base de datos para buscar 
alguna information. iJa\ vez el usuario pidio cambiar algo en los datos? Como una carta diciendo "Por favor cambia la 
descripcion de mi trabajo." La vista puede comprobar si tienes permiso para hacerlo, actualizar la descripcion de tu trabajo 
y devolver un mensaje: "jHecho!". Luego la vista genera una respuesta y Django puede enviarla al navegador del usuario. 

Esta descripcion es un poco simplista, pero de momento no necesitas saber todos los detalles tecnicos, con tener una idea 
general es mas que suficiente. 

Asi que en lugar de detenernos demasiado en los detalles, vamos a empezar a crear algo con Django y jasi 
aprenderemos las cosas importantes sobre la marcha! 
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Nota Si usas un Chromebook, omite este capitulo y asegurate de seguir las instrucciones de Chromebook Setup. 

Nota Si ya has realizado los pasos de instalacion, esto ya lo has hecho. jPuedes avanzar directamente al siguiente 
capitulo! 

Parte de esta seccion se basa en tutoriales por Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). 

Parte de este capitulo esta basada en el django-marcador tutorial bajo la licencia Creative Commons Attribution- 
ShareAlike 4.0 internacional. El tutorial de django-marcador tiene derechos de autor de Markus Zapke-Gundemann 
et al. 

Entorno virtual 

Antes de instalar Django, instalaremos una herramienta extremadamente util que ayudara a mantener tu entorno de 
desarrollo ordenado en tu computadora. Es posible saltarse este paso, pero es altamente recomendable. jEmpezar con la 
mejor configuracion posible te ahorrara muchos problemas en el futuro! 

Asi que, vamos a crear un entorno virtual (tambien llamado un virtualenv). Virtualenv aisla tu configuracion de 
Python/Django por cada proyecto. Esto quiere decir que cualquier cambio que hagas en un sitio web no afectara a ningun 
otro que estes desarrollando. Genial, ^no? 

Todo lo que necesitas hacer es encontrar un directorio en el que quieras crear el virtualenv ; tu directorio home, por 
ejemplo. En Windows, puede verse como c:\users\Name (donde Name es el nombre de tu usuario). 

NOTA: En Windows, asegurate de que este directorio no contiene caracteres especiales o acentuados; si tu nombre 
de usuario contiene caracteres acentuados, usa un directorio distinto, por ejemplo c:\djangogiris . 

Para este tutorial usaremos un nuevo directorio djangogiris en tu directorio home: 

command-line 

$ mkdir djangogiris 
$ cd djangogiris 


Haremos un virtualenv llamado myvenv . El comando general estara en el formato: 
command-line 


$ python3 -m venv myvenv 


Virtual environment: Windows 

Para crear un nuevo virtualenv , necesitas abrir una terminal "command prompt" y ejecutar python -m venv myvenv . Se 
vera asi: 

command-line 

C:\Users\Name\djangogirls> python -m venv myvenv 


Donde myvenv es el nombre de tu virtualenv . Puedes utilizar cualquier otro nombre, pero asegurate de usar minusculas 
y no usar espacios, acentos o caracteres especiales. Tambien es una buena idea mantener el nombre corto. jVas utilizarlo 
muchas vecesl! 

Virtual environment: Linux and OS X 

Podemos crear un virtualenv en Linux y OS X, es tan sencillo como ejecutar python3 -m venv myvenv . Se vera asi: 
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command-line 


$ python3 -m venv myvenv 


myvenv es el nombre de tu virtuaienv . Puedes usar cualquier otro nombre, pero solo utiliza minusculas y no incluyas 
espacios. Tambien es una buena idea mantener el nombre corto. jVas a referirte muchas veces a el! 

NOTA: En algunas versiones de Debian/Ubuntu, puede que obtengas el siguiente error: 

command-line 


The virtual environment was not created successfully because ensurepip is not available. En sistemas Debian/U 
buntu, tendras que instalar el paquete python3-venv usando el siguiente comando. 
apt-get install python3-venv 

Puede que tengas que usar sudo con este comando. Despues de instalar el paquete python3-venv, vuelve a crear 
tu entorno virtual. 


En este caso, sigue las instrucciones anteriores e instala el paquete python3-venv : 
command-line 


$ sudo apt install python3-venv 


NOTA: En algunas versiones de Debian/Ubuntu inicializar el entorno virtual de esta manera da el siguiente error: 
command-line 


Error: Command '[ 1 /home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' 
returned non-zero exit status 1 


Para evitar esto, utiliza directamente el comando virtuaienv . 
command-line 

$ sudo apt-get install python-virtualenv 
$ virtuaienv --python=python3.6 myvenv 

NOTA: Si obtienes un error como 
command-line 

E: Unable to locate package python3-venv 

entonces ejecuta: 
command-line 

sudo apt install python3.6-venv 


Trabajar con virtuaienv 

El comando anterior creara un directorio llamado myvenv (o cualquier nombre que hayas elegido) que contiene nuestro 
entorno virtual (basicamente un monton de archivos y carpetas). 

Working with virtuaienv: Windows 

Inicia el entorno virtual ejecutando: 

command-line 
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C:\Users\Name\djangogirls> myvenv\Scripts\activate 


Nota: en 10 de Windows puedes obtener un error en Windows PowerShell que dice execution of scripts is 
disabled on this system . En este caso, abre otro Windows PowerShell con la opcion "Ejecutar como administrador". 
Luego intenta escribir el siguiente comando antes de inicializar tu entorno virtual: 

command-line 


C:\WIND0WS\system32 > Set-ExecutionPolicy -ExecutionPolicy RemoteSigned 
Execution Policy Change 

The execution policy helps protect you from scripts that you do not trust. Changing the execution policy mi 
ght expose you to the security risks described in the about_Execution_Policies help topic at http://go.microso 
ft.com/fwlink/?LinkID=135170. Do you want to change the execution policy? [Y] Yes [A] Yes to All [N] No [L] 
No to All [S] Suspend [?] Help (default is "N"): A 


Working with virtualenv: Linux and OS X 

Inicia el entorno virtual ejecutando: 

command-line 


$ source myvenv/bin/activate 


jRecuerda reemplazar myvenv con tu nombre de virtualenv que hayas elegido! 

NOTA: a veces source podria no estar disponible. En ese caso trata hacerlo de esta forma: 
command-line 

$ . myvenv/bin/activate 


Sabras que tienes virtualenv iniciado cuando veas que la linea de comando en tu consola tiene el prefijo (myvenv) . 

Cuando trabajes en un entorno virtual, python automaticamente se referira a la version correcta, de modo que puedes 
utilizar python en vez de python3 . 

Ok, tenemos todas las dependencias importantes en su lugar. jFinalmente podemos instalar Django! 


Instalar Django 

Ahora que tienes tu virtualenv iniciado, puedes instalar Django. 

Antes de hacer eso, debemos asegurarnos que tenemos la ultima version de pip , el software que utilizamos para instalar 
Django: 

command-line 


(myvenv) ~$ python3 -m pip install --upgrade pip 


Instalar paquetes con un fichero de requisitos (requirements) 

Un fichero de requisitos (requirements) tiene una lista de dependencias que se deben instalar mediante pip install : 

Lo primero, crea un fichero requirements.txt dentro del directorio djangogiris/ , usando el editor de codigo que hemos 
instalado hace un momenta: 


djangogiris 


-req 


uirements.txt 
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Dentro del fichero djangogiris/requirements.txt deberias tener el siguiente texto: 
djangogirls/requirements.txt 


Django~=2.0.6 


Ahora, ejecuta pip install -r requirements.txt para instalar Django, 
command-line 


(myvenv) ~$ pip install -r requirements.txt 
Collecting Django~=2.0.6 (from -r requirements.txt (line 1)) 
Downloading Django-2.0.6-py3-none-any.whl (7.1MB) 
Installing collected packages: Django 
Successfully installed Django-2.0.6 


Installing Django: Windows 

Si obtienes un error al ejecutar pip en Windows comprueba si la ruta de tu proyecto contiene espacios, acentos o 
caracteres especiales (por ejemplo, c:\users\user Name\djangogiris ). Si los tiene, por favor considera moverla a 
otro lugar sin espacios, acentos o caracteres especiales (sugerencia: c:\djangogiris ). Crea un nuevo virtualenv en 
el nuevo directorio, luego borra el viejo y reintenta el comando anterior. (Mover el directorio de virtualenv no funciona 
puesto que virtualenv usa rutas absolutas.) 

Installing Django: Windows 8 and Windows 10 

Puede que tu linea de comandos se congele despues de que intentes instalar Django. Si esto sucede, en vez del 
comando anterior utiliza: 

command-line 


C:\Users\Name\djangogirls> python -m pip install -r requirements.txt 


Installing Django: Linux 

Si obtienes un error al ejecutar pip en Ubuntu 12.04 ejecuta python -m pip install -u --force-reinstaii pip para 
arreglar la instalacion de pip en el virtualenv. 

jEso es todo! Ahora estas lista (por fin) para crear una aplicacion Django! 
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jTu primer proyecto en Django! 


Parte de este capitulo se basa en tutoriales por Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). 

Parte de este capitulo esta basado en el tutorial django-marcador bajo licencia de Creative Commons Attribution- 
ShareAlike 4.0 internacional. El tutorial de django-marcador tiene derechos de autor de Markus Zapke-Gundemann 
et al. 

jVamos a crear un blog sencillo! 

El primer paso es iniciar un nuevo proyecto de Django. Basicamente, significa que vamos a lanzar unos scripts 
proporcionados por Django que nos crearan el esqueleto de un proyecto de Django. Son solo un monton de directorios y 
archivos que usaremos mas tarde. 

Los nombres de algunos archivos y directorios son muy importantes para Django. No deberias renombrar los archivos que 
estamos a punto de crear. Moverlos a un lugar diferente tampoco es buena idea. Django necesita mantener una cierta 
estructura para poder encontrar cosas importantes. 

Recuerda ejecutar todo en el virtualenv. Si no ves un prefijo (myvenv) en tu consola tienes que activar tu virtualenv. 
Explicamos como hacerlo en el capitulo de Instalacion de Django en la seccion Trabajar con virtualenv. Basta 
con escribir myvenv\Scripts\activate en Windows O source myvenv/bin/activate en Mac OS / Linux. 

Create project: OS X or Linux 

En MacOS o Linux deberias ejecutar el siguiente comando en la consola. no te olvides de ahadir el punto . al final 
command-line 


(myvenv) ~/djangogirls$ django-admin startproject mysite 


El punto . es crucial porque le dice al script que instale Django en el directorio actual (para el cual el punto . 
sirve de abreviatura). 

Nota Cuando escribas los comandos de arriba acuerdate de que solo tienes que escribir la parte que empieza por 
django-admin . La parte de (myvenv) -/djangogiris$ que mostramos aqui es solo un ejemplo del mensaje que 
aparecera en tu linea de comandos. 

Create project: Windows 

En Windows debes ejecutar el siguiente comando. (No olvides incluir el punto . al final): 
command-line 


(myvenv) C:\l)sers\Name\djangogirls> django-admin.exe startproject mysite . 


El punto . es crucial porque le dice al script que instale Django en el directorio actual (para el cual el punto . 
sirve de abreviatura). 

Nota Cuando teclees los comandos de arriba, recuerda que solo tienes que escribir la parte que empieza por 
django-admin.exe . La parte de (myvenv) C:\Users\Name\djangogirls> que mostramos aqui es solo un ejemplo del 
mensaje que aparecera en tu linea de comandos. 

django-admin.py es un script que creara los archivos y directorios para ti. Ahora deberias tener una estructura de 
directorios parecida a esta: 
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djangogirls 

|-manage. py 

|-mysite 

settings.py 
j urls.py 

| wsgi.py 

_init_.py 

1 -requirements.txt 


Nota: en tu estructura de directorios, tambien veras el directorio venv gue creamos anteriormente. 

manage.py es un script que ayuda con la administration del sitio. Con el podremos iniciar un servidor web en nuestro 
ordenador sin necesidad de instalar nada mas, entre otras cosas. 

El archivo settings.py contiene la configuracion de tu sitio web. 

Recuerdas cuando hablamos de una cartera que debia comprobar donde entregar una carta? El archivo urls.py 
contiene una lista de los patrones utilizados por uriresoiver . 

Por ahora vamos a ignorar el resto de archivos porque no los vamos a cambiar. jSolo acuerdate de no borrarlos 
accidentalmente! 

Cambiar la configuracion 

Vamos a hacer algunos cambios en mysite/settings. py . Abre el archivo usando el editor de codigo que has instalado 
anteriormente. 

Nota: Ten en cuenta que settings.py es un archivo normal, como cualquier otro. Puedes abrirlo con el editor de texto, 
usando "file -> open" en el menu de acciones. Esto te deberia llevar a la tipica ventana donde puedes buscar el archivo 
settings.py y seleccionarlo. Como alternativa, puedes abrir el archivo haciendo click derecho en la carpeta djangogirls en 
tu escritorio. Luego, selecciona tu editor de texto en la lista. Elegir el editor es importante puesto que puede que tengas 
otros programas que pueden abrir el archivo pero que no te dejaran editarlo. 

Seria bueno tener el horario correcto en nuestro sitio web. Ve a lista de Wikipedia de las zonas horarias y copia tu zona 
horaria (TZ) (e.g. Europa/Berlin ). 

En settings.py , encuentra la linea que contiene time_zone y modificala para elegir tu zona horaria. Por ejemplo: 
mysite/settings.py 

TIME_ZONE = ' Europe/Berlin 1 

Un codigo de idioma tiene dos partes: el idioma, p.ej. en para ingles o de para aleman, y el codigo de pais, p.ej. de 
para Alemania o ch para Suiza. Si tu idioma nativo no es el ingles, puedes anadir lo siguiente para cambiar el idioma de 
los botones y notificaciones de Django. Asi tendras el boton "Cancel" traducido al idioma que pongas aqui. Django trae un 

monton de traducciones listas para usar. 

Si quieres un idioma diferente, cambia el codigo de idioma cambiando la siguiente linea: 
mysite/settings.py 

LANGUAGE_CODE = ’es-es’ 

Tambien tenemos que anadir una ruta para archivos estaticos. (Veremos todo acerca de archivos estaticos y CSS mas 
adelante.) Ve al final del archivo, y justo debajo de la entrada static_url , anade una nueva llamada static_root : 

mysite/settings.py 
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STATIC_URL = '/Static/' 

STATIC_ROOT = os. path .join(BASE_DIR, 'static') 


Cuando debug es True y allowed_host esta vacio, el host es validado contra ['locaihost', ' 127 , 0 . 0 . 1 ', ' [:: 1 ] '] . Una 
vez despleguemos nuestra aplicacion este no sera el mismo que nuestro nombre de host en PythonAnywhere asi que 
cambiaremos la siguiente opcion: 

mysite/settings.py 

AL LOWED_HOSTS = [ 1 127.0.0.1 1 , '.pythonanywhere.com'] 

Nota: si estas usando un Chromebook, anade esta linea al final del archivo settings.py: message_storage = 

'dj ango.contrib.messages.storage.session.SessionStorage' 

Anade tambien .c9users.io a allowed_hosts si estas usando cloud9 


Configurar una base de datos 

Hay una gran variedad de opciones de bases de datos para almacenar los datos de tu sitio. Utilizaremos la que viene por 
defecto, sqlite3 . 

Esta ya esta configurado en esta parte de tu archivo mysite/settings.py : 
mysite/settings.py 

databases = { 

' default' : { 

'ENGINE' : 'django.db.backends.sqlite3', 

'NAME': os.path.join(BASE_DIR, 'db.sqlite3' ), 

> 

> 


Para crear una base de datos para nuestro blog, ejecutemos lo siguiente en la consola: python manage.py migrate 
(necesitamos estar en el directorio de djangogiris que contiene el archivo manage. py ). Si eso va bien, deberias ver algo 
asi: 

command-line 


(myvenv) ~/djangogirls$ python manage.py migrate 
Operations to perform: 

Apply all migrations: auth, admin, contenttypes, sessions 
Running migrations: 

Rendering model states... DONE 

Applying contenttypes.0001_initial... OK 

Applying auth.0001_initial... OK 

Applying admin.0001_initial... OK 

Applying admin.0002_logentry_remove_auto_add... OK 

Applying contenttypes.0002_remove_content_type_name... OK 

Applying auth.0002_alter_permission_name_max_length... OK 

Applying auth.0003_alter_user_email_max_length... OK 

Applying auth.0004_alter_user_username_opts... OK 

Applying auth.0005_alter_user_last_login_null... OK 

Applying auth.0006_require_contenttypes_0002... OK 

Applying auth.0007_alter_validators_add_error_messages... OK 

Applying sessions.0001_initial... OK 


Y, jterminamos! Es hora de iniciar el servidor web y ver si esta funcionando nuestro sitio web! 


Iniciar el servidor 
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Debes estar en el directorio que contiene el archivo manage.py (en la carpeta djangogiris ). En la consola, podemos 
iniciar el servidor web ejecutando python manage.py runserver : 

command-line 

(myvenv) ~/djangogirls$ python manage.py runserver 

Si estas usando un Chromebook, utiliza este comando: 

Cloud 9 

(myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 


Si estas en Windows y te falla con un error unicodeDecodeError , utiliza en su lugar este comando: 
command-line 

(myvenv) ~/djangogirls$ python manage.py runserver 0:8000 


Ahora todo lo que tienes que hacer es comprobar que tu sitio se este ejecutando. Abre tu navegador (Firefox, Chrome, 
Safari, Internet Explorer o el que utilices) y escribe la direccion: 

browser 


http://127.0.0.1:8000/ 


Si estas usando un Chromebook, siempre visitaras tu servidor de pruebas accediendo a: 
browser 

https://django-girls-<your cloud9 username>.c9users.io 


jEnhorabuena! jHas creado tu primer sitio web y lo has iniciado usando un servidor web! i,No es genial? 


Django: the Web framewo X 

<- e a 


© 127.0.0.1:8000 

django 


_"• O * 

View release notes for Django 2.0 


m\ m 


▲ 



The install worked successfully! Congratulations! 

You are seeing this page because DEBUG=True is in 
your settings file and you have not configured any 
URLs. 


q Django Documentation 

Topics, references. & how-to's 


<> Tutorial: A Polling App 

Get started with Django 


oo Django Community 

Connect, get help, or contribute 


Mientras el servidor se este ejecutando, no podras ejecutar comandos adicionales. La terminal aceptara texto pero no 
ejecutara ningun comando. Esto sucede porque el servidor se ejecuta continuamente para recibir solicitudes. 




jTu primer proyecto en Django! 


Miramos como funcionan los servidores web en el capitulo Como funciona el internet. 

Recuerda, para escribir comandos mientras el servidor web esta funcionando, abre una nueva terminal y activa el 
virtualenv. Para parar el servidor web, ve a la ventana donde se este ejecutando y pulsa CTRL+C, las teclas Control y C a 
la vez ( en Windows puede que tengas que pulsar Ctrl+Break). 

^Preparada para el proximo paso? jEs momento de crear algo de contenido! 
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Modelos en Django 


Lo que queremos crear ahora es algo que almacene todas las entradas de nuestro blog. Pero para poder hacerlo tenemos 
que hablar un poco sobre algo llamado objetos . 

Objetos 

Hay un concepto en el mundo de la programacion llamado programacion orientada a objetos . La idea es que en lugar de 
escribir todo como una aburrida secuencia de instrucciones de programacion podemos modelar cosas y definir como 
interactuan entre ellas. 

Entonces, ^que es un objeto? Es un conjunto de propiedades y acciones. Suena raro, pero te daremos un ejemplo. 

Si queremos modelar un gato crearemos un objeto Gato que tiene algunas propiedades como: color , edad , 
temperamento (como bueno, malo, o dormilon ;)), y dueno (este es un objeto persona o en caso de un gato callejero, 
esta propiedad esta vacia). 

Luego, el Gato tiene algunas acciones como: ronronear , aranar o aiimentar (en cuyo caso daremos al gato algo de 
comidaDeGato , el cual deberia ser un objeto aparte con propiedades como sabor ). 


Gato 


color 

edad 

humor 

dueno 

ronronear() 
rasgunar() 

aiimentarse(comida_de_gato) 
ComidaDeGato 


sabor 


ComidaDeGato 


sabor 


Basicamente se trata de describir cosas reales en el codigo con propiedades (llamadas propiedades del objeto ) y las 
acciones (llamadas metodos ). 

Y ahora, ^como modelamos las entradas en el blog? Queremos construir un blog, <^no? 

Necesitamos responder a la pregunta: ^Que es una entrada de un blog? ^Que propiedades deberia tener? 

Bueno, seguro que nuestras entradas de blog necesitan un texto con su contenido y un titulo, ^cierto? Tambien seria 
bueno saber quien lo escribio, asi que necesitamos un autor. Por ultimo, queremos saber cuando se creo y publico la 
entrada. 


Post 


title 

text 

author 

created_date 

published_date 
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^Que tipo de cosas podria hacerse con una entrada del blog? Seria bueno tener algun metodo que publique la entrada, 
cLno? 

Asi que vamos a necesitar el metodo pubiicar . 

Puesto que ya sabemos lo que queremos lograr, jpodemos empezar a modelarlo en Django! 


Modelos en Django 

Sabiendo que es un objeto, podemos crear un modelo en Django para nuestros entradas de blog. 

Un modelo en Django es un tipo especial de objeto que se guarda en la base de datos . Una base de datos es una 
coleccion de datos. Es un lugaren el cual almacenaras la information sobre usuarios, tus entradas de blog, etc. 
Utilizaremos una base de datos SQLite para almacenar nuestros datos. Este es el adaptador de base de datos 
predeterminado en Django -- sera suficiente para nosotros por ahora. 

Puedes pensar el modelo en la base de datos, como una hoja de calculo con columnas (campos) y filas (datos). 

Crear una aplicacion 

Para mantener todo en orden, crearemos una aplicacion separada dentro de nuestro proyecto. Es muy bueno tener todo 
organizado desde el principio. Para crear una aplicacion, necesitamos ejecutar el siguiente comando en la consola (dentro 
de la carpeta de djangogiris donde esta el archivo manage.py ): 

Mac OS X y Linux: 


(myvenv) ~/djangogirls$ python manage.py startapp blog 


Windows: 


(myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog 


Notaras que se ha creado un nuevo directorio blog y ahora contiene una cantidad de archivos. Los directorios y archivos 
en nuestro proyecto deberian verse asi: 


djangogiris 
|— blog 

I |— —init—. py 

j |— admin.py 

I |— apps.py 

■ |— migrations 

I | 1 — —init—. py 

; |— models.py 

; |— tests.py 

| 1 — views.py 

|— db.sqlite3 
|— manage.py 
|— mysite 
I I— —init—. py 

i |— settings.py 

I I— urls.py 

| 1 — wsgi.py 

1 — requirements.txt 


Despues de crear una aplicacion, tambien necesitamos decide a Django que debe utilizarla. Eso se hace en el fichero 
mysite/settings. py -- abrelo en el editor. Tenemos que encontrar installed_apps y agregar una linea que contiene 
1 blog 1 , justo por encima de ] . El producto final debe tener este aspecto: 

mysite/settings.py 
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INSTALLED_APPS = [ 

'django.contrib.admin' , 
'django.contrib.auth' , 

'django.contrib.contenttypes' , 
'django.contrib.sessions' , 
'django.contrib.messages' , 

'django.contrib.staticfiles' , 
'blog'. 


Crear el modelo del Post 

En el archivo biog/modeis.py definimos todos los objetos llamados Models . Este es un lugar en el cual definiremos 
nuestra entrada del blog. 

Abre biog/modeis.py en el editor, borra todo, y escribe codigo como este: 
blog/models, py 


from django.db import models 
from django.utils import timezone 


class Post (models.Model) : 

author = models.ForeignKey( 'auth.User' , on_delete=models.CASCADE) 
title = models.CharField(max_length=20O) 
text = models.TextField() 
created_date = models.DateTimeField( 
default=timezone.now) 
published_date = models.DateTimeField( 
blank=True, null=True) 

def publish(self) : 

self.published_date = timezone.now() 
self.save() 

def _ _str_ (self): 

return self.title 


Comprueba nuevamente que usas dos guiones bajos ( _ ) en cada lado de str . Esta convention se usa en 
Python con mucha frecuencla y a veces tambien se llaman "dunder" (abreviatura de "double-underscore" o, en 
espanol, "doble guion bajo"). 

Da un poco de miedo, <^no? Pero no te preocupes, jvamos a explicar que significan estas lineas! 

Todas las lineas que comienzan con from o import son lineas para agregar algo de otros archivos. Asi que en vez de 
copiar y pegar las mismas cosas en cada archivo, podemos incluir algunas partes con from... import .... 

class post(modeis.Model) : , esta linea define nuestro modelo (es un objeto ). 

• class es una palabra clave que indica que estamos definiendo un objeto. 

• post es el nombre de nuestro modelo. Podemos darle un nombre diferente (pero debemos evitar espacios en bianco 
y caracteres especiales). Siempre inicia el nombre de una clase con una letra mayuscula. 

• models.Model significa que Post es un modelo de Django, asi Django sabe que debe guardarlo en la base de datos. 

Ahora definimos las propiedades de las que hablabamos: title , text , created_date , pubiished_date y author . Para 
ello tenemos que definir el tipo de cada campo (<^es texto? <^un numero? ^una fecha? ^una relation con otro objeto como 
un User (usuario)?) 

• models.charFieid , asi es como defines un texto con un numero limitado de caracteres. 

• models.TextFieid , este es para texto largo sin limite. Suena perfecto para el contenido de la entrada del blog, <^no? 

• models. DateTimeFieid , este es fecha y hora. 

• modelos.ForeignKey , este es una relacion (link) con otro modelo. 
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No vamos a explicar aqui cada pedacito de codigo porque nos tomaria demasiado tiempo. Deberias echar un vistazo a la 
documentation de Django si quieres saber mas sobre los campos de los Modelos y como definir cosas diferentes a las 
descritas anteriormente (https://docs.djangoproject.eom/en/2.0/ref/models/fields/#field-types). 

que sobre def pubiish(seif ): ? Es exactamente el metodo publish que mencionabamos antes, def significa que es 
una funcion/metodo y publish es el nombre del metodo. Puedes cambiar el nombre del metodo, si quieres. La regia de 
nomenclatura es utilizar minusculas y guiones bajos en lugar de espacios. Por ejemplo, un metodo que calcule el precio 
medio se podria llamar calcular_preciojnedio . 

Los metodos suelen devolver ( return , en ingles) algo. Hay un ejemplo de esto en el metodo _ str _. En este escenario, 

cuando llamemos a _str _() obtendremos un texto (string) con un titulo de Post. 

Tambien, nota que ambos def pubiish(seif) : ,y def _str_(seif): son indentados dentro de nuestra clase. Porque 

Python es sensible a los espacios en blancos, necesitamos indentar nuestros metodos dentro de la clase. De lo contrario, 
los metodos no pertenecen a la clase, y puedes obtener un comportamiento inesperado. 

Si algo todavia no esta claro sobre modelos, jno dudes en preguntar a tu guia! Sabemos que es complicado, sobre todo 
cuando aprendes lo que son funciones y objetos al mismo tiempo. Pero con suerte, jtodo tiene un poco mas de sentido 
para ti ahora! 

Crear tablas para los modelos en tu base de datos 

El ultimo paso aqui es agregar nuestro nuevo modelo a la base de datos. Primero tenemos que hacer saber a Django que 
hemos hecho cambios en nuestro modelo. (Lo acabamos de crear!) Ve a tu terminal y escribe python manage.py 
makemigrations blog . Se Vera ash 

command-line 


(myvenv) ~/djangogirls$ python manage.py makemigrations blog 
Migrations for 'blog': 

blog/migrations/0001_initial.py: 

- Create model Post 


Nota: Recuerda guardar los archivos que edites. De otro modo, tu computador ejecutara las versiones anteriores lo que 
puede ocasionar errores inesperados. 

Django prepare un archivo de migration que ahora tenemos que aplicar a nuestra base de datos. Escribe python 
manage.py migrate blog y el resultado deberia ser: 

command-line 


(myvenv) ~/djangogirls$ python manage.py migrate blog 
Operations to perform: 

Apply all migrations: blog 
Running migrations: 

Applying blog.0001_initial... OK 


jHurra! jNuestro modelo Post ya esta en nuestra base de datos! Estaria bien verlo, ^no? jSalta al siguiente capitulo para 
ver que aspecto tiene tu Post! 
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Administrador de Django 

Para agragar, editar y borrar los posts que hemos modelado, usaremos el administrador (admin) de Django. 
Abre el fichero biog/admin. py en el editor y reemplaza su contenido con esto: 
blog/admin.py 

from django.contrib import admin 
from .models import Post 

admin.site.register(Post) 


Como puedes ver, importamos (incluimos) el modelo Post definido en el capitulo anterior. Para hacer nuestro modelo 
visible en la pagina del administrador, tenemos que registrar el modelo con admin, site, register (post) . 

Ok, es hora de ver nuestro modelo Post. Recuerda ejecutar python manage.py runserver en la consola para corner el 
servidor web. Ve a tu navegador y escribe la direction http://127.0.0.1:8000/admin/. Veras una pagina de inicio de sesion 
como esta: 


Django administration 


Username: 


Password: 


Log in 


Para iniciar sesion, deberas crear un superusuario (superuser), que es un usuario que tiene control sobre todo el sitio. 
Vuelve a la linea de comandos, escribe python manage.py createsuperuser y pulsa enter. 

Recuerda, para escribir comandos mientras el servidor web esta funcionando, abre una nueva terminal y activa el 
virtualenv. Revisamos como escribir nuevos comandos en el capitulo Tu primer proyecto de Django!, al inicio de la 
section Iniciando el servidor web. 

Mac OS X o Linux: 

(myvenv) ~/djangogirls$ python manage.py createsuperuser 


Windows: 


(myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser 
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Cuando te lo pida, escribe tu nombre de usuario (en minuscula, sin espacios), email y contrasena. No te preocupes si no 
puedes ver la password que estas tecleando - asi es como debe ser. Teclealo y pulsa intro para continuar. Luego, 
veras algo asi (Donde username y email seran los que escribiste anteriormente): 


Username: admin 

Email address: admin@admin.com 
Password: 

Password (again): 

Superuser created successfully. 


Vuelve a tu navegador. Entra con las credenciales de super usuario que tu escogiste; veras el panel de administrador de 
Django. 


Django administration 


Site administration 



ON AND AUTHORIZATION 


Groups 


+ Add f Change 


Users 


+ Add / Change 


BLOG 


Posts + Add f Change 


Ve a 'Posts' y curiosea un poco. Anade cinco o seis publicaciones en tu blog. No te preocupes por el contenido -- solo sera 
visible para ti en tu ordenador -- puedes copiar y pegar texto de este tutorial para ir mas rapido. :) 


Asegurate de que al menos dos o tres posts (pero no todos) tengan la fecha de publication definida. Esto sera muy 
poderoso despues. 


Django administration 

WELCOME, KOJO. VIEW SITE / CHANGE PASSWORD / LOG OUT 

Home Blog Posts > Add post 



Add post 


Author: 


✓ + 


Title: 


Text: 


Created date: 


Date: 2015-12-25 Today g| 
Time: 20:50:01 Now 0 


Published date. 


Date: Today (™) 

Time: Now © 


Save and add another I Save and continue editing I SAVE 
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Si desea saber mas acerca de Django admin, deberia revisar la documentation Django: 

https://docs.djangoproject.eom/en/2.0/ref/contrib/admin/ 

Este posiblemente sea un buen momento para tomar un cafe (o te) o algo para comer y re energizar tu cuerpo. Has creado 
tu primer modelo en Django - jMereces un pequeno descanso! 
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jDespliega! 


Nota El siguiente capitulo puede ser, a veces, un poco dificil de seguir. Ten paciencia y acabalo. El despliegue es 
una parte importante del proceso en el desarrollo de un sitio web. Este capitulo esta a mitad del tutorial para que tu 
mentor pueda ayudarte a conseguir que tu sitio web este online, algo que puede ser un poco complicado. Asi, 
aunque se te acabe el tiempo, podras terminar el tutorial por tu cuenta. 

Hasta ahora, tu sitio web solo esta disponible en tu ordenador. jAhora aprenderas como desplegarlo! El despliegue es el 
proceso de publicar tu aplicacion en internet para que la gente pueda acceder y ver tu sitio web. :) 

Como ya has aprendido, un sitio web tiene que estar en un servidor. Hay muchos proveedores de servidores disponibles 
en internet, nosotros vamos a usar PythonAnywhere. PythonAnywhere es gratuito para aplicaciones pequenas que no 
tienen muchos visitantes, y con eso tendras mas que suficiente por ahora. 

El otro servicio externo que vamos a utilizar es GitHub, un servicio de almacenamiento de codigo. Hay otras opciones por 
ahi, pero hoy en dia casi todas las programadoras y programadores tenemos una cuenta de GitHub, jy ahora til tambien la 
vas a tener! 

Estos tres lugares seran importantes para ti. Tu ordenador local sera el lugar donde desarrollas y pruebas. Cuando estes 
contento con los cambios, subiras una version de tu programa a GitHub. Tu sitio web estara en PythonAnywhere y para 
actualizarlo descargaras la ultima version de tu codigo desde GitHub. 


Git 


Nota Si ya has realizado los pasos de instalacion, no los tienes que repetir, puedes avanzar a la siguiente seccion y 
empezar a crear tu repositorio de Git. 

Git es un "sistema de control de versiones" que utilizan muchos programadores. Este software puede seguir los cambios 
realizados en archivos a lo largo del tiempo de forma que mas tarde puedas volver a cualquier version anterior. Es un poco 
parecido a la opcion de "control de cambios" de Microsoft Word, pero mucho mas potente. 

Instalar Git 

Installing Git: Windows 

Puedes descargar Git desde git-scm.com. Puedes hacer click en "next" en todos los pasos a exception de uno; en el 
quinto paso titulado "Adjusting your PATH environment", escoge "Use Git and optional Unix tools from the Windows 
Command Prompt" (la de abajo del todo). Aparte de eso, los valores por defecto estan bien. "Checkout Windows-style, 
commit Unix-style line endings" tambien esta bien. 

No olvides reiniciar la terminal o powershell despues de que la instalacion termine. 

Installing Git: OS X 

Descarga Git de git-scm.com y sigue las instrucciones. 

Nota Si estas usando OS X 10.6, 10.7 o 10.8, tendras que instalar git desde aqui: Git installer for OS X Snow 
Leopard 

Installing Git: Debian or Ubuntu 

command-line 

$ sudo apt install git 


Installing Git: Fedora 
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command-line 


$ sudo dnf install git 


Installing Git: openSUSE 

command-line 


$sudo zypper install git 


Crear nuestro repositorio Git 


Git sigue los cambios realizados a un grupo determinado de archivos en lo que llamamos un repositorio de codigo 
(abreviado "repo"). Vamos a crear uno para nuestro proyecto. Abre la consola y ejecuta los siguientes comandos en el 
directorio de djangogirls: 

Nota Comprueba en que directorio estas ahora mismo (es decir, el directorio de trabajo actual) con el comando 
pwd (OSX/Linux)o cd (Windows) antes de inicializar el repositorio. Deberias estar en la carpeta djangogirls. 

command-line 


$ git init 

Initialized empty Git 
$ git config --global 
$ git config --global 


repository in -/djangogirls/.git/ 
user.name "Tu nombre" 
user.email tu@ejemplo.com 


Inicializar el repositorio de git es algo que solo tenemos que hacer una vez por proyecto (y no tendras que volver a teclear 
tu nombre de usuario y correo electronico nunca mas). 

Git llevara un seguimiento de los cambios realizados en todos los archivos y carpetas en este directorio, pero hay algunos 
archivos que queremos que ignore. Esto lo hacemos creando un archivo llamado .gitignore en el directorio base. Abre 
tu editor y crea un nuevo archivo con el siguiente contenido: 

.gitignore 


* ■ pyc 

_pycache_ 

myvenv 
db.sqlite3 
/static 
.DS_Store 


Y guardalo como .gitignore en la carpeta "djangogirls". 
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Nota jEl punto al principio del nombre del archivo es importante! Si tienes problemas para crearlo (a los Mac no les 
gusta que crees ficheros con un punto al principio del nombre usando el Finder por ejemplo), entonces usa la opcion 
"Save As" o "Guardar como" de tu editor, esto funcionara seguro. Asegurate de no anadir . txt , . py , o ninguna 
otra extension al nombre de fichero -- Git solo lo reconocera si se llama exactamente .gitignore , sin nada mas. 

Nota Uno de los archivos especificados en tu .gitignore es db.sqiite3 . Ese fichero es tu base de datos local, 
donde se almacenan los usuarios y publicaciones de tu blog. Vamos a seguir las buenas practicas de programacion 
web: vamos a usar bases de datos separadas para tu sitio local y tu sitio en produccion en PythonAnywhere. La 
base de datos en PythonAnywhere podria ser SQLite, como en tu maquina de desarrollo, pero tambien podrias usar 
otro gestor de base de datos como MySQL o PostgreSQL que pueden soportar muchas mas visitas que SQLite. En 
cualquier caso, al ignorar la base de datos SQLite en tu copia de GitHub, todos los posts y el super usuario que has 
creado hasta el momento solo estaran disponibles en local, y tendras que crear nuevos usuarios y publicaciones en 
produccion. Tu base de datos local es un buen campo de pruebas donde puedes probar diferentes cosas sin miedo 
a estropear o borrar las publicaciones reales de tu blog. 

Te recomendamos utilizar el comando git status antes de git add o en cualquier momento en que no sepas muy bien 
lo que ha cambiado. Esto te ayudara a evitar sorpresas, como subir cambios o archivos que no queriamos subir. El 
comando git status muestra informacion sobre cualquier archivo no seguido ("untracked"), modificado ("modified"), 
preparado ("staged"), el estado de la rama y muchas cosas mas. La salida deberia ser parecida a esto: 

command-line 

$ git status 

On branch master 

Initial commit 

Untracked files: 

(use "git add <file>..." to include in what will be committed) 

.gitignore 
blog/ 
manage.py 
mysite/ 

requirements.txt 

nothing added to commit but untracked files present (use "git add" to track) 


Y finalmente guardamos nuestros cambios. Ve a la consola y ejecuta estos comandos: 
command-line 


$ git add --all . 

$ git commit -m "Mi aplicacion Django Girls, primer commit" 
[•■■] 

13 files changed, 200 insertions(+) 
create mode 100644 .gitignore 
[■■■] 

create mode 100644 mysite/wsgi.py 


Subiendo tu codigo a Github 

Ve a GitHub.com y registrate para tener una cuenta gratuita. (Si ya tienes una o lo hiciste en la preparation del taller, 
igenial!) 

A continuation, crea un nuevo repositorio con el nombre "my-first-blog". Deja el checkbox "initialize with a README" sin 
marcar, deja la opcion de .gitignore vacia (ya lo hemos hecho manualmente) y deja la licencia como None. 
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Owner 

\ hjwp - / 

Great repository names are short and memorable. Need mspeation? How about ducking-octo-tynon 
Description optional) 


Repository name 

my-lirst-blog ✓ 


• Lj Public 

Anyone can see this repository You choose who can commit. 


ory 


Private 


Initialize this repository with a README 

This will let you Immediately done the repository to your computer. Skip t 



Hep it you're importing an existing repository 


None - Add a license. None - 



Nota El nombre my-first-biog es importante - podrias escoger otro, pero va a salir muchas veces en las 
instrucciones que vienen a continuacion, y vas a tener que acordarte de cambiarlo cada vez. Lo mas facil es 
quedarse con el nombre my-first-biog . 


En la siguiente pantalla, veras la URL para clonar el repo, que tendras que usar en los comandos que van a continuacion: 


githob.com 


O 


•C C?gi 

Explore Gist Blog Kelp 


e + A 4 z 




p / my-first-blog 


1 h(wp +- C? O l* 


<2> Unwatch - 1 * Star o 


Quick s« — if you've done this kind of thing before 

Or HTTPS 9BH https: //github.con/hjup/ny first blog.git 
We recommend every repository indude a README, LICENSE, and .gi 


<> Cocln 


& 


...or create a new repository on the command line 

echo "a ny*first-blog" » README.md 
git init 

git odd RFAOME.nd 

git connit -n "first connit" £ 

git renote add origin https://fllthub.con/h)wp/ny-tlrst-blog.glt 
git push -u origin master 

X 


..or push an existing repository from the command line 

git renote add origin https://github.con/h)wp/ny-flrst-blog.git 
git push -u origin master 


Ahora necesitas enlazar el repositorio Git en tu ordenador con el repositorio de GitHub. 

Escribe lo siguiente en la consola (cambia <your-github-username> por tu nombre de usuario de GitHub, pero sin los 
simbolos < y > - fijate en que la URL deberia coincidir con la URL para clonar el repo que acabas de ver): 

command-line 


$ git remote add origin https://github.com/<your-github-username>/my-first-blog.git 
$ git push -u origin master 
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Cuando hagas push a GitHub, te preguntara tu usuario y password de GitHub, y despues de introducirlos, deberias ver 
algo como esto: 

command-line 


Counting objects: 6, done. 

Writing objects: 100% (6/6), 200 bytes | 0 bytes/s, done. 

Total 3 (delta 0), reused 0 (delta 0) 

To https://github.com/ola/my-first-blog.git 

* [new branch] master -> master 

Branch master set up to track remote branch master from origin. 


Tu codigo ya esta subido a GitHub. jVe y compruebalo! Encontraras que esta en buena compania - DjangoDjango Girlst 
Tutorial, y muchos otros proyectos de software libre estan alojados en GitHub. :) 


Configurar nuestro blog en PythonAnywhere 
Crea una cuenta en PythonAnywhere 

Nota A lo mejor ya has creado una cuenta en PythonAnywhere durante los pasos de instalacion. Si es asi, no 
necesitas hacerlo otra vez. 

PythonAnywhere es un servicio para ejecutar codigo Python en servidores "en la nube". Lo vamos a usar para alojar 
nuestro sitio para que este disponible en Internet. 

Crea una cuenta de Principiante ("Beginner") en PythonAnywhere (el nivel gratuito esta bien, no necesitas tarjeta de 
credito). 

• www.pythonanywhere.com 

Plans and pricing 

Beginner: Free! 

A limited account with one web app at your-username. pythonanywhere. com, restricted outbound Internet access from your apps, low CPU/bandwidth, no 

I Python/Jupyter notebook support. 

It works and it's a great way to get started! 


Create a Beginner account 


Nota Cuando elijas un nombre de usuario, recuerda que la URL de tu blog tendra la forma 

tunombredeusuario.pythonanywhere.com , asi que lo mejor sera usar tu apodo o elegir un nombre que indique de que 
trata tu blog. 

Crear un token para la API de PythonAnywhere 

Solo tendras que hacer esto la primera vez. Cuando entres en PythonAnywhere, veras el panel de control ("dashboard"). 
En la esquina superior derecha, busca el enlace la pagina de tu cuenta ("Account"), selecciona una pestana llamada "API 
token" y pulsa el boton que pone "Create new API token". 
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Upgrade/Downgrade Account Email and security Teacher API Token 


Your API token 

You do not have an API token yet. 

/ 


Create a new API token 


By clicking this button you agree that you understand that this API is new and 

Configurar nuestro sitio en PythonAnywhere 

Vuelve al dashboard de PythonAnywhere haciendo click en el logo, y escoge la opcion de iniciar una consola "Bash" - esta 
terminal es como la que hay en tu ordenador, pero en el servidor de PythonAnywhere. 
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Recent 

Consoles 


You have no recent consoles. 


View all 


New console: 


$ Bash T »> Python ▼ 


More... 


Nota PythonAnywhere esta basado en Linux, asi que si estas en Windows, la consola sera un poco distinta a la de 
tu ordenador. 

Para desplegar una aplicacion web en PythonAnywhere necesitas descargar tu codigo de GitHub y configurar 
PythonAnywhere para que lo reconozca y lo sirva como una aplicacion web. Hay formas de hacerlo manualmente, pero 
PythonAnywhere tiene una herramienta automatica que lo hara todo por nosotros. Lo primero, vamos a instalar la 
herramienta: 

PythonAnywhere command-line 


$ pip3.6 install --user pythonanywhere 


Eso deberia mostraren pantalla algunos mensajes como collecting pythonanywhere , y finalmente una linea diciendo que 
ha terminado bien: Successfully installed (...) pythonanywhere- (...) . 


Ahora ejecutaremos el asistente para configurar automaticamente nuestra aplicacion desde GitHub. Teclea lo siguiente en 
la consola de PythonAnywhere (no te olvides de usar tu propio nombre de usuario de GitHub en lugar de <your-github- 
username> , para que la URL sea como la URL de clonar el repo de GitHub): 
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PythonAnywhere command-line 


$ pa_autoconfigure_django.py https://github.com/<your-github-username>/my-first-blog.git 


A medida que se ejecuta, podras ver lo que hace: 

• Se descarga tu codigo de GitHub 

• Crea un virtualenv en PythonAnywhere, igual que el de tu ordenador local 

• Actualiza tus ficheros de settings con algunos settings de despliegue 

• Crea la base de datos en PythonAnywhere ejecutando el comando manage.py migrate 

• Configura los archivos estaticos (static) (luego hablaremos de estos con mas detalle) 

• Y configura PythonAnywhere para publicar tu aplicacion web a traves de su API 

En PythonAnywhere todos estos pasos estan automatizados, pero son los mismos que tendrias que seguir en cualquier 
otro proveedor de servidores. 

Lo mas importante que debes tener en cuenta es que tu base de datos en PythonAnywhere es totalmente independiente 
de la base de datos de tu propio ordenador, puede tener diferentes posts y cuentas de administrador. Como consecuencia, 
igual que lo hicimos en tu ordenador, tenemos que crear la cuenta de administrador con el comando createsuperuser . 
PythonAnywhere ya ha activado el virtualenv automaticamente, asi que lo unico que tienes que hacer es ejecutar: 

PythonAnywhere command-line 


(ola.pythonanywhere.com) $ python manage.py createsuperuser 


Teclea las credenciales para tu usuario admin. Para evitar confusiones, te recomendamos usar el mismo nombre de 
usuario que usaste en tu ordenador local; aunque a lo mejor prefieres que la contrasena en PythonAnywhere sea mas 
segura. 

Ahora, si quieres, tambien puedes ver tu codigo en PythonAnywhere con el comando is : 

PythonAnywhere command-line 


(ola.pythonanywhere.com) $ Is 

blog db.sqlite3 manage.py mysite requirements.txt static 
(ola.pythonanywhere.com) $ Is blog/ 

_init_.py _pycache_ admin.py forms.py migrations models.py static 

templates tests.py urls.py views.py 


Tambien puedes ir a la pagina de ficheros ("Files") y navegar por los ficheros y directorios usando el visor de 
PythonAnywhere. (Desde la pagina de la consola ("Console"), puedes ir a cualquier otra pagina de PythonAnywhere 
usando el boton de la esquina superior derecha. Desde el resto de paginas, tambien hay enlaces a las otras en la parte 
superior.) 


jYa estas en vivo! 

jTu sitio ya deberia estar online en internet! Haz click en la pagina "Web" de PythonAnywhere para obtener un enlace a el. 
Puedes compartir este enlace con quien tu quieras :) 

Nota Este es un tutorial para principiantes, y al desplegar este sitio hemos tornado algunos atajos que tal vez no 
sean las mejores practicas desde el punto de vista de la seguridad. Si decides ampliar este proyecto o comenzar 
uno nuevo, deberias revisar el Checklist de despliegue de Django con recomendaciones para que tu sitio sea mas 
seguro. 

Consejos de depuracion 
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Si te sale un error al ejecutar el script pajiutconfigure_django.py , aqui hay algunas causas comunes: 

• Te has olvidado de crear el token de API de PythonAnywhere. 

• No has puesto bien la URL de GitHub 

• Si ves un error diciendo "Could not find your settings.py, es probable que no anadieras todos tus archivos a Git, y/o no 
los subiste a GitHub correctamente. Repasa la seccion de Git mas arriba 

Si ves un error al visitar tu sitio, el primer lugar para ver que esta pasando es el log de errores. Encontrara un enlace en la 
pagina "Web" de PythonAnywhere. Mira si hay algun mensaje de error alii; los mas recientes estan en la parte inferior. 

Hay tambien algunos consejos generates de depuracion en la pagina de ayuda de PythonAnywhere. 

Y recuerda, jtu mentor esta aqui para ayudar! 


jComprueba tu pagina! 


La pagina por defecto deberia decir "It worked!", tal como dice en tu ordenador local. Prueba a anadir /admin/ al final de 
la URL y llegaras a la pagina de administration. Entra con tu usuario y password, y veras que puedes anadir nuevas 
publicaciones en el servidor -- recuerda, los post que tenias en tu base de datos local no se han subido a al blog publicado 
en production. 

Despues de crear algunas publicaciones, puedes volver a tu instalacion local (no la de PythonAnywhere). A partir de 
ahora, trabaja en tu instalacion local para hacer los siguientes cambios. Este es un flujo de trabajo tipico en el desarrollo 
web - haz cambios localmente, sube (push) esos cambios a GitHub, y descarga (pull) tus cambios al servidor de 
publication. Esto te permite trabajar y experimentar en local sin romper tu pagina publicada. Mola, <^eh? 

jDate una GRAN palmada en la espalda! Desplegar a un servidor es una de las partes mas complicadas de desarrollo web 
y a menudo la gente necesita varios dias para que funcione del todo. Pero tu ya tienes tu sitio publicado, jen internet de 
verdad! 
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URLs en Django 


Estamos a punto de construir nuestra primera pagina web: juna pagina de inicio para el blog! Pero primero, vamos a 
aprender un poco acerca de las urls en Django. 

<j,Que es una URL? 

Una URL es una direction de la web. Puedes ver una URL cada vez que visitas una pagina. Se ve en la barra de 
direcciones del navegador. (Si! j 127.0.0.1:8000 es una URL! Y https://djangogiris.org tambien es una URL.) 

Django: the Web framewo X 

«-) -» e & 


+ 


(D 127.0.0.1:8000 


django 


Cada pagina en Internet necesita su propia URL. De esta manera tu aplicacion sabe lo que debe mostrar a un usuario que 
abre una URL. En Django utilizamos algo que se llama uRLconf (configuration de URL). URLconf es un conjunto de 
patrones que Django intentara comparar con la URL recibida para encontrar la vista correcta. 


i,C6mo funcionan las URLs en Django? 

Vamos a abrir el archivo mysite/urls.py en el editor de codigo de tu election y veamos lo que tiene: 
mysite/urls.py 


"""mysite URL Configuration 
[■■■] 

from django.urls import path, include 
from django.contrib import admin 

urlpatterns = [ 

path(' admin/' , admin.site.urls). 


Como puedes ver, Django ya puso algo aqui por nosotros. 

Lineas entre triples comillas ( '' 1 o . ) son llamadas docstrings - puedes escribirlos en la parte superior de un archivo, 

clase o metodo para describir lo que hace. No seran ejecutadas por Python. 

La URL de admin, que hemos visitado en el capitulo anterior ya esta aqui: 

mysite/urls.py 


path ( 1 admin/' , admin.site.urls). 


80 




URLs en Django 


Esta linea dice que para cada URL que empieza con admin/ Django encontrara su correspondiente view. En este caso 
estamos incluyendo muchas URLs admin asi que no todo esta empaquetado en este pequeno archivo. Es mas limpio y 
legible. 


jTu primera URL de Django! 

jEs hora de crear nuestra primera URL! Queremos que 'http://127.0.0.1:8000/' sea la pagina de inicio del blog y que 
muestre una lista de post. 

Tambien queremos mantener limpio el archivo mysite/uris.py , asi que vamos a importar las urls de nuestra aplicacion 
blog en el archivo principal mysite/uris.py. 

Vamos, anade la linea para importar biog.uris . Tambien tienes que cambiar la primera linea, porque vamos a usar la 
funcion include y tenemos que importarla. 

El archivo mysite/uris.py deberia verse ahora asi: 

mysite/uris.py 


from django.urls import path, include 
from django.contrib import admin 

urlpatterns = [ 

path( 1 admin/ 1 , admin.site.urls), 
path('', include(' blog.urls ')), 

] 


Ahora Django redirigira todo lo que entre a 'http://127.0.0.1:8000/' hacia biog.uris y buscara mas instrucciones alii. 

biog.uris 

Crea un nuevo fichero vacio llamado uris.py el el directorio blog , y abrelo en el editor de codigo. j Vale! Anade las dos 
primeras lineas: 

blog/urls.py 


from django.urls import path 
from . import views 


Aqui estamos importando la funcion de Django path y todos nuestras views desde la aplicacion blog (no tenemos una 
aun, pero veremos eso en un minuto!) 

Luego de esto, podemos agregar nuestro primer patron URL: 

blog/urls.py 


urlpatterns = [ 

path('', views.post_list, name=' post_list' ), 


Como puedes ver, estamos asociando una vista ( view ) llamada post_iist a la URL raiz. Este patron de URL detectara 
la cadena vacia, y el URL resolver de Django no tiene en cuenta el nombre el dominio (i.e., http://127.0.0.1:8000/) que 
viene antes del path de la url. Este patron le dira a Django que views.post_iist es el lugar correcto al que ir si alguien 
entra a tu sitio web con la direction 'http://127.0.0.1:8000/'. 

La ultima parte name='post_iist' es el nombre de la URL que se utilizara para identificar a la vista. Puede coincidir con el 
nombre de la vista pero tambien puede ser algo completamente distinto. Utilizaremos las URL con nombre mas delante en 
el proyecto asi que es importante darle un nombre a cada URL de la aplicacion. Tambien deberiamos intentar mantener los 
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nombres de las URL unicos y faciles de recordar. 

Si tratas de visitar http://127.0.0.1:8000/ ahora, encontraras un mensaje de error 'web page not available' a algo asi. Esto 
es porque el servidor (^recuerdas que escribimos runserver ?) ya no esta funcionando. Mira la ventana de la consola del 
servidor para saber por que. 


return _bootstrap._gcd_import(name[level:], package, level) 

File "<frozen importlib._bootstrap>", line 2254, in _gcd_import 
File "<frozen importlib._bootstrap>", line 2237, in _find_and_load 
File "<frozen importlib._bootstrap>", line 2226, in _find_and_load_unlocked 
File "<frozen importlib._bootstrap>", line 1200, in _load_unlocked 
File "<frozen importlib._bootstrap>", line 1129, in _exec 
File "<frozen importlib._bootstrap>", line 1471, in exec_module 
File "<frozen importlib._bootstrap>", line 321, in _call_with_frames_removed 
File "AJsers/dana/Dana-Files/Codes/djangogirls/blog/urls.py", line 5, in <module> 
url(r l/y $', views.post_list, name='post_list'), 

AttributeError: 'module' object has no attribute 'post_list‘ 


La consola esta mostrando un error, pero no te preocupes - de hecho es muy util: esta diciendote que no existe el 
atributo 'post_list'. Ese es el nombre del w'ewque Django esta tratando de encontrary usar, pero aun no lo hemos 
creado. En esta etapa tu /admin/ tampoco funcionara. No te preocupes, ya llegaremos a eso. Si ves un error diferente, 
intenta reiniciar el servidor web. Para ello, en la consola en la que se esta ejecutando el servidor web, paralo pulsando 
Ctrl+C (las teclas Control y C a la vez) y reinicialo ejecutando el comando python manage.py runserver . 

SI quieres saber mas sobre Django URLconfs, mira la documentacion oficial: 
https://docs.djangoproject.eom/en/2.0/topics/http/urls/ 
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Vistas en Django - jHora de crear! 

Es hora de deshacerse del error que hemos creado en el capitulo anterior! :) 

Una Viewes un lugar donde ponemos la "logica" de nuestra aplicacion. Pedira informacion del modeio que has creado 
antes y se la pasara a la piantiiia . Crearemos una plantilla en el proximo capitulo. Las vistas son solo metodos de 
Python que son un poco mas complicados que los que escribimos en el capitulo Introduction a Python. 

Las Vistas se colocan en el archivo views.py . Agregaremos nuestras views al archivo biog/views.py . 

blog/views.py 

Vale, abre este fichero en el editor y mira lo que hay en el: 
blog/views.py 


from django.shortcuts import render 

# Create your views here. 


No hay demasiadas cosas aqui todavia. 

Recuerda que las lineas que comienzan con # son comentarios - significa que Python no las ejecutara. 
Creemos una vista (view) como sugiere el comentario. Anade la siguiente mini-vista por debajo: 
blog/views.py 


def post_list (request) : 

return render(request, 'blog/post_list.html' , {}) 


Como puedes ver, hemos creado una funcion ( def ) llamada post_iist que acepta request y return una funcion 
render que reproduce (construye) nuestra plantilla biog/post_iist.htmi . 


Guarda el archivo, ve a http://127.0.0.1:8000/ y mira lo que hemos hecho. 


jOtro error! Leamos lo que esta pasando ahora: 


TemplateDoesNotExist at/ X 

+ 

<- ->• e & 


127.0.0.1:8000 


TemplateDoesNotExist at / 


blog/postlist.html 


Request Method: 
Request URL: 
Django Version: 
Exception Type: 
Exception Value: 


GET 

http://127.0.0.1:8000/ 

1 . 11.12 

TemplateDoesNotExist 

blog/postlist.html 


Esto demuestra que el servidor esta funcionando otra vez, al menos, pero todavia no se ve bien, i,No? No te preocupes, 
es solo una pagina de error, jnada a que temer! Al igual que los mensajes de error en la consola, estos son realmente muy 
utiles. Puedes leer que la TemplateDoesNotExist. Vamos a corregir este error y crear una plantilla en el proximo capitulo! 
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Puedes aprender mas de las vistas de Django leyendo la documentacion oficial 
https://docs.djangoproject.eom/en/2.0/topics/http/views/ 
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Introduccion a HTML 


Te estaras preguntando, ^que es una plantilla? 

Una plantilla es un archivo que podemos reutilizar para presentar informacion diferente de forma consistente - por ejemplo, 
podrias utilizar una plantilla para ayudarte a escribir una carta, porque aunque cada carta puede contener un mensaje 
distinto y dirigirse a una persona diferente, compartiran el mismo formato. 

El formato de una plantilla de Django se describe en un lenguaje llamado HTML (el HTML que mencionamos en el primer 
capitulo Como funclona Internet). 

<j,Que es HTML? 

HTML es un codigo simple que es interpretado por tu navegador web - como Chrome, Firefox o Safari - para mostrar una 
pagina web al usuario. 

HTML significa HyperText Markup Language - en espanol, Lenguaje de Marcas de HyperTexto. HyperText -hipertexto en 
espanol- significa que es un tipo de texto que soporta hipervinculos entre paginas. Markup significa que hemos tornado un 
documento y lo hemos marcado con codigo para decide a algo (en este caso, un navegador) como interpretar la pagina. El 
codigo HTMLesta construido con etiquetas, cada una comenzando con < y terminando con > . Estas etiquetas 
representan elementos de marcado. 

jTu primera plantilla! 

Crear una plantilla significa crear un archivo de plantilla. Todo es un archivo, ^verdad? Probablemente hayas notado esto 
ya. 

Las plantillas se guardan en el directorio de biog/tempiates/biog . Asi que primero crea un directorio llamado templates 
dentro de tu directorio blog. Luego crea otro directorio llamado blog dentro de tu directorio de templates: 


blog 


-templates 
1 -blog 


(Tal vez te estes preguntando por que necesitamos dos directorios llamados blog - como veras mas adelante, es una 
convention de nombres que nos facilitara la vida cuando las cosas se pongan mas complicadas.) 

Y ahora crea un archivo post_iist.html (dejalo en bianco por ahora) dentro de la carpeta biog/tempiates/biog . 

Mira como se ve su sitio web ahora: http://127.0.0.1:8000/ 

Si todavia tienes un error TempiateDoesNotExist , intenta reiniciar tu servidor. Ve a la consola, para el servidor 
pulsando Ctrl+C (las teclas Control y C a la vez) y reinicialo ejecuntado el comando python manage.py runserver . 
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jNingun error mas! Felicidades :) Sin embargo, por ahora, tu sitio web no esta publicando nada excepto una pagina en 
bianco, porque la plantilla tambien esta vacia. Tenemos que arreglarlo. 

Abre un fichero nuevo en el editor y escribe lo siguiente: 

blog/templates/blog/postjist.html 


<html> 

<body> 

<p>Hi there !</p> 
<p>It works !</p> 
</body> 

</html> 


Ahora, como luce tu sitio web? Haz click para ver: http://127.0.0.1:8000/ 


flOO 

J 

Q 127.0.0.1:8000 x _ 

4- C 

Q 127.0.0.1:8000 

Hi there! 


It works! 



jFunciono! Buen trabajo :) 


• La etiqueta mas basica, <htmi> , siempre va al inicio de cualquier pagina web y </htmi> va siempre al final. Como 
puedes ver, todo el contenido de la pagina web va desde el principio de la etiqueta <htmi > y hasta la etiqueta de 
cierre </htmi > 

• <p> es una etiqueta para los elementos de parrafo; </p> cierra cada parrafo 

Cabeza y cuerpo 

Cada pagina HTML tambien se divide en dos elementos: head y body. 

• head es un elemento que contiene information sobre el documento que no se muestra en la pantalla. 

• body es un elemento que contiene todo lo que se muestra como parte de la pagina web. 

Usamos <head> para decide el navegador acerca de la configuration de la pagina y <body> para decir lo que realmente 
esta en la pagina. 
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Por ejemplo, puedes ponerle un titulo a la pagina web dentro de la <head> , asi: 
blog/templates/blog/postjist.html 


<html> 

<head> 

<title>01a's blog</title> 
</head> 

<body> 

<p>Hi there !</p> 

<p>It works !</p> 

</body> 

</html> 


Guarda el archivo y actualiza tu pagina. 


••• 

[ Ola's blog x v _ 

uTc 

D 127.0.0.1:8000 

Hi there! 


It works! 



(•.Observas como el navegador ha comprendido que "Ola's blog" es el titulo de tu pagina? Ha interpretado <titie>oia's 
biog</titie> y coloco el texto en la barra de titulo de tu navegador (tambien se utilizara para marcadores y asi 
sucesivamente). 

Probablemente tambien hayas notado que cada etiqueta de apertura coincide con una etiqueta de cierre, con un / , y que 
los elementos son anidados (es decir, no puedes cerrar una etiqueta particular hasta que todos los que estaban en su 
interior se hayan cerrado tambien). 

Es como poner cosas en cajas. Tienes una caja grande, <htmi></htmi> ; en su interior hay <body></body> , y que contiene 
las cajas aun mas pequenas: <p></p> . 

Tienes que seguir estas reglas de etiquetas de cierre y de anidacidn de elementos - si no lo haces, el navegador puede no 
ser capaz de interpretarlos apropiadamente y tu pagina se mostrara incorrectamente. 

Personaliza tu plantilla 

jAhora puedes divertirte un poco y tratar de personalizar tu plantilla! Aqui hay algunas etiquetas utiles para eso: 

• <hi>un tituio</hi> - para tu titulo mas importante 

• <h 2 >un subtituio</h 2 > - para el titulo del siguiente nivel 

• <h3>un subsubtituio</h3> -... y asi hasta <h6> 

• <p>Un parrafo de texto</p> 

• <em>texto</ein> - pone en cursiva tu texto 

• <strong>texto</strong> - pone en negrita tu texto 

• <br> va en otra linea (no puedes poner nada dentro de br y no hay etiqueta de cierre) 

• <a href="https://djangogirls.org">linl«/a> - crea un vinculo 

• <ul><li>primer elemento</lixli>segundo elemento</lix/ul> - crea una lista, jigual que esta! 

• <div></div> - define una section de la pagina 

Aca va un ejemplo de una plantilla completa, copialo y pegalo en biog/tempiates/biog/post_iist.htmi : 
blog/templates/blog/postjist.html 
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<html> 

<head> 

<title>Django Girls blog</title> 

</head> 

<body> 

<div> 

<hl><a href="/">Django Girls Blog</a></hl> 
</div> 


<div> 

<p>published: 14.06.2014, 12:14</p> 

<h2><a href="">My first post</a></h2> 

<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donee id elit non mi po 
rta gravida at eget metus. Fusee dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass 
a justo sit amet risus.</p> 

</div> 


<div> 

<p>published: 14.06.2014, 12:14</p> 

<h2><a href="">My second post</a></h2> 

<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donee id elit non mi po 
rta gravida at eget metus. Fusee dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p> 

</div> 

</body> 

</html> 


Aqui hemos creado tres secciones div . 

• El primer elemento div contiene el titulo de nuestro blog - es un encabezado y un enlace 

• Otros dos elementos div contienen nuestras publicaciones (posts) del blog con su fecha de publication, h 2 con el 
titulo del post que es clickable y dos p s (parrafos) de texto, uno para la fecha y otro para el contenido del post. 

Nos da este efecto: 


' Django Girls blog x U_ 

*■ C [5 127.0.0.1:8000 

Django Girls Blog 

published: 14.062014,12:14 

Mv first post 

Acncan cu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donc< 
massa justo sit amet risus. 

published: 14.062014,12:14 

Mv second post 

Acncan cu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donct 

jYaaay! Pero hasta el momenta, nuestra plantilla solo muestra exactamente la misma informacion - considerando que 
antes hablabamos de plantillas como permitiendonos mostrar informacion diferente en el mismo formato. 
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Lo que queremos realmente es mostrar posts reales anadidos en nuestra pagina de administration de Django - y ahi es a 
donde vamos a continuation. 


Una cosa mas: jdespliega! 

Seria bueno ver todo esto disponible en Internet, ^no? Hagamos otro despliegue en PythonAnywhere: 

Haz commit, y sube tu codigo a GitHub 

En primer lugar, vamos a ver que archivos han cambiado desde la ultima puesta en marcha (ejecute estos comandos 
localmente, no en PythonAnywhere): 

command-line 

$ git status 


Asegurate de que estas en el directorio djangogiris y vamos a decide a git que incluya todos los cambios en este 
directorio: 

command-line 

$ git add --all . 


Nota --ail significa que git tambien reconocera si has borrado archivos (por defecto, solo reconoce archivos 
nuevos o modificados). Tambien recuerda (del capitulo 3) que . significa el directorio actual. 

Antes de que subamos todos los archivos, vamos a ver que es lo que git subira (todos los archivos que git cargara 
deberian aparecer en verde): 

command-line 


$ git status 


Ya casi estamos, ahora es tiempo de decide que guarde este cambio en su historial. Vamos a darle un "mensaje de 
commit" donde describimos lo que hemos cambiado. Puedes escribir cualquier cosa que te gustaria en esta etapa, pero es 
util escribir algo descriptivo para que puedes recordar lo que has hecho en el futuro. 

command-line 


$ git commit -m "Cambie el HTML para la pagina. 


Nota Asegurate de usar comillas dobles alrededor del mensaje de commit. 

Una vez hecho esto, subimos (push) los cambios a Github: 
command-line 

$ git push 


Descarga tu nuevo codigo a PythonAnywhere y actualiza tu aplicacion web 

• Abre la pagina de consolas de PythonAnywhere y ve a tu consola Bash (o comienza una nueva). Luego, ejecuta: 
PythonAnywhere command-line 
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$ cd ~/<your-pythonanywhere-username>.pythonanywhere.com 
$ git pull 
[...] 


(Recuerda sustituir <your-pythonanywhere-username> por tu nombre de usuario real en PythonAnywhere sin los < >). 

Y mira como se descarga tu codigo. Si quieres comprobar que efectivamente ha llegado bien, puedes ir a la pagina 
"Files" y ver tu codigo en PythonAnywhere (puedes ir a otras paginas de PythonAnywhere desde el boton de la esquina 
superior derecha de la pagina de la consola). 

• Finalmente, ve a la pagina "Web" y pulsa Reload en tu aplicacion web. 

jTu nueva version ya deberia estar publicada! Ve al navegador y refresca tu sitio web. Deberias ver los cambios. :) 
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ORM de Django y QuerySets 

En este capitulo aprenderas como Django se conecta a la base de datos y almacena los datos en ella. jVamos a 
sumergirnos! 

<j,Que es un QuerySet? 

Un QuerySet es, en esencia, una lista de objetos de un modelo determinado. Un QuerySet te permite leer los datos de la 
base de datos, filtrarlos y ordenarlos. 

Es mas facil de aprender con ejemplos. Vamos a intentarlo, ^de acuerdo? 

Django shell 

Abre tu consola local (no la de PythonAnywhere) y escribe este comando: 
command-line 


(myvenv) ~/djangogirls$ python manage.py shell 


El resultado deberia ser: 
command-line 


(InteractiveConsole) 

»> 


Ahora estas en la consola interactiva de Django. Es como una consola de Python normal, pero con un poco de magia de 
Django. :) Aqui tambien se pueden usar todos los comandos de Python. 


Todos los objetos 

Vamos a mostrar todos nuestros posts primero. Puedes hacerlo con el siguiente comando: 
command-line 


»> Post. objects. all() 

Traceback (most recent call last): 

File "<console>", line 1 , in <module> 
NameError: name 'Post' is not defined 


jUy! Aparecio un error. Nos dice que Post no existe. Esto es correcto, jolvidamos importarlo! 
command-line 


»> from blog.models import Post 


Vamos a importar el modelo post de blog.models . Y probamos de nuevo a mostrar todas las publicaciones (posts): 
command-line 


»> Post. objects. all() 

<QuerySet [<Post: my post title>, <Post: another post title>]> 
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jEs la lista de posts que creamos anteriormente! Creamos estos posts usando la interfaz de administration de Django. 
Pero, ahora queremos crear nuevos posts usando Python, i,como lo hacemos? 

Crear objetos 

Esta es la forma de crear un nuevo objeto Post en la base de datos: 
command-line 

»> Post.objects.create(author=me, title= 'Sample title', text='Test') 


Pero nos falta un ingrediente aqui: me . Tenemos que pasar una instancia del modelo user como autor. ^Eso como se 
hace? 

Primero importemos el modelo User: 
command-line 

»> from django.contrib.auth.models import User 


^Que usuarios tenemos en nuestra base de datos? Prueba esto: 
command-line 


»> User. objects. all() 
<QuerySet [<User: ola>]> 


jEste es el superusuario que hemos creado antes! Ahora, vamos a obtener una instancia de este usuario (cambia el 
codigo para usar tu propio nombre de usuario): 

command-line 


»> me = User.objects.get(username='ola') 


Como ves, ya hemos obtenido ( get ) un usuario ( user ) cuyo username es igual a 'ola'. jMola! 

Ahora, finalmente, podemos crear nuestra entrada: 

command-line 

»> Post.objects.create(author=me, title= 'Sample title', text='Test') 

<Post: Sample title> 


jHurra! ^Quieres probar si funciono? 
command-line 


»> Post. objects. all() 

<QuerySet [<Post: my post title>, <Post: another post title>, <Post: Sample title>]> 


jAhi esta, una entrada de blog mas en la lista! 

Agrega mas entradas 

Ahora puedes divertirte un poco y agregar mas entradas para ver como funciona. Agrega dos o tres mas y avanza a la 
siguiente parte. 
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Filtrar objetos 

Una parte importante de los QuerySets es la habilidad para filtrar los resultados. Digamos que queremos encontrar todos 
los post del usuario ola. Usaremos filter en vez de ail en post.objects.aii() . Entre parentesis estableceremos que 
condition (o condiciones) debe cumplir un post del blog para aparecer como resultado en nuestro queryset. En nuestro 
caso seria author es igual a me . La forma de escribirlo en Django es: author=me . Ahora nuestro bloque de codigo tiene 
este aspecto: 

command-line 


»> Post.objects.filter(author=me) 

<QuerySet [<Post: Sample title>, <Post: Post number 2>, <Post: My 3rd post!>, <Post: 4th title of post>]> 


<•,0 quiza queremos ver todas las entradas que contengan la palabra 'title' en el campo title ? 
command-line 


»> Post.objects.filter(title_contains= 'title' ) 

<QuerySet [<Post: Sample title>, <Post: 4th title of post>]> 


Nota Hay dos guiones bajos ( _ ) entre title y contains . El ORM de Django utiliza esta sintaxis para separar los 
nombres de los campos ("title") de las operaciones o filtros ("contains"). Si solo utilizas un guion bajo, obtendras un 
error como "FieldError: Cannot resolve keyword title_contains". 

Tambien puedes obtener una lista de todos los post publicados. Lo hacemos filtrando los post que tienen la fecha de 
publication, pubiished_date , en el pasado: 

command-line 


»> from django.utils import timezone 

»> Post.objects.filter(published_date_lte=timezone.now()) 

<QuerySet []> 


Por desgracia, el post que hemos anadido desde la consola de Python aim no esta publicado. Pero lo podemos cambiar! 
Primero obten una instancia de la entrada que queremos publicar: 

command-line 


»> post = Post.objects.get(title="Sample title") 


Y luego publicala con nuestro metodo publish : 
command-line 


»> post. publish() 


Ahora vuelve a intentar obtener la lista de posts publicados (pulsa la tecla de "flecha arriba" tres veces y pulsa enter ): 
command-line 


»> Post.objects.filter(published_date_lte=timezone.now()) 

<QuerySet [<Post: Sample title>]> 


Ordenar objetos 

Los QuerySets tambien te permiten ordenar la lista de objetos. Intentemos ordenarlos por el campo created_date : 
command-line 
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»> Post.objects.order_by(' created_date' ) 

<QuerySet [<Post: Sample title>, <Post: Post number 2>, <Post: My 3rd post!>, <Post: 4th title of post>]> 


Tambien podemos invertir el orden agregando - al principio: 
command-line 


»> Post.objects.order_by( 1 -created_date' ) 

<QuerySet [<Post: 4th title of post>, <Post: My 3rd post!>, <Post: Post number 2>, <Post: Sample title>]> 


Encadenar QuerySets 

Tambien puedes combinar QuerySets encadenando uno con otro: 


»> Post.objects.filter(published_date_lte=timezone.now()).order_by( 'published_date' ) 

<QuerySet [<Post: Post number 2>, <Post: My 3rd post!>, <Post: 4th title of post>, <Post: Sample title>]> 


Es muy potente y te permite escribir consultas bastante complejas. 

jGenial! jAhora estas lista para la siguiente parte! Para cerrar la consola, escribe esto: 

command-line 

»> exit() 

$ 
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Datos dinamicos en plantillas 


Tenemos diferentes piezas en su lugar: el modelo post esta definido en models.py , tenemos a post_iist en views.py 
y la plantilla agregada. ^.Pero como haremos realmente para que nuestros posts aparezcan en nuestra plantilla HTML? 
Porque eso es lo que queremo, tomar algun contenido (modelos guardados en la base de datos) y mostrarlo 
adecuadamente en nuestra plantilla, i,no? 

Esto es exactamente lo que las views se supone que hacen: conectar modelos con plantillas. En nuestra view post_iist 
necesitaremos tomar los modelos que deseamos mostrar y pasarlos a una plantilla. En una vista decidimos que (modelo) 
se mostrara en una plantilla. 

Muy bien, entonces ^como lo logramos? 

Tenemos que abrir blog/views. py en el editor. De momenta post_iist view tiene esto: 
blog/views.py 


from django.shortcuts import render 
def post_list (request) : 

return render(request, 'blog/post_list.html' , {}) 


^Recuerdas cuando hablamos de incluir codigo en diferentes archivos? Ahora tenemos que incluirel modelo que 
definimos en el archivo models.py . Agregaremos la linea from .models import post de la siguiente forma: 

blog/views.py 


from django.shortcuts import render 
from .models import Post 


El punto antes de models indica el directorio actual o la aplicacidn actual. Ambos, views.py y models.py estan en el 
mismo directorio. Esto significa que podemos utilizar . y el nombre del archivo (sin .py ). Ahora importamos el nombre 
del modelo ( post ). 

^.Pero ahora que sigue? Para tomar posts reales del modelo Post , necesitamos algo llamado Queryset . 

QuerySet 

Ya debes estar familiarizada con la forma en que funcionan los QuerySets. Hablamos de ellos en el capitulo Django ORM 
(QuerySets). 

Asi que ahora nos interesa tener una lista de post publicados ordenados por pubiished_date (fecha de publication), <^no? 
jYa lo hicimos en el capitulo QuerySets! 

blog/views.py 


Post.obj ects.filter(published_date_lte=timezone.now()).order_by( 'published_date 1 ) 


Abre blog/views.py en el editor, y anade este trozo de codigo a la funcion def post_iist(request) --pero no te olvides 
de anadir from django.utils import timezone antes: 

blog/views.py 
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from django.shortcuts import render 
from django.utils import timezone 
from .models import Post 

def post_list( request) : 

posts = Post.objects.filter(published_date_lte=timezone.now()).order_by( 'published_date' ) 

return render(request, 'blog/post_list.html 1 , {}) 


La ultima parte es pasar el QuerySet posts a la plantilla context. No te preocupes, mostraremos como mostrarlo mas 
adelante. 

Fijate en que creamos una variable para el QuerySet: posts . Tratala como si fuera el nombre de nuestro QuerySet. De 
aqui en adelante vamos a referirnos al QuerySet con ese nombre. 

En la funcion render tenemos el parametro request (todo lo que recibimos del usuario via Internet) y otro parametro 
dandole el archivo de la plantilla ( 'biog/post_iist.htmi' ). El ultimo parametro, que se ve asi: {} es un lugar en el que 
podemos agregar algunas cosas para que la plantilla las use. Necesitamos nombrarlos (los seguiremos llamando 'posts' 
por ahora). :) Se deberia ver asi: {'posts': posts} . Fijate en que la parte antes de : es una cadena; tienes que 
envolverla con comillas: " . 

Finalmente nuestro archivo biog/views.py deberia verse asi: 
blog/views.py 


from django.shortcuts import render 
from django.utils import timezone 
from .models import Post 

def post_list( request) : 

posts = Post.objects.filter(published_date_lte=timezone.now()).order_by( 1 published_date 1 ) 

return render(request, 'blog/post_list.html' , {'posts': posts}) 


jTerminamos! Ahora regresemos a nuestra plantilla y mostremos este QuerySet. 

Si quieres leer un poco mas acerca de QuerySets en Django, puedes darle un vistazo a: 

https://docs.djangoproject.eom/en/2.0/ref/models/querysets/ 
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jEs hora de mostrar algunos datos! Para ello Django incorpora unas etiquetas de plantillas, template tags, muy utiles. 

i,Que son las etiquetas de plantilla? 

Veras, en HTML no se puede escribir codigo en Python porque los navegadores no lo entienden. Solo saben HTML. 
Sabemos que HTMLes bastante estatico, mientras que Python es mucho mas dinamico. 

Las etiquetas de plantilla de Django nos permiten insertar elementos de Python dentro del HTML, para que puedas 
construir sitios web dinamicos mas rapida y facilmente. jGenial! 

Mostrar la plantilla lista de posts 

En el capitulo anterior le dimos a nuestra plantilla una lista de entradas en la variable posts . Ahora la vamos a mostrar en 
HTML. 

Para imprimir una variable en una plantilla de Django, utilizamos Naves dobles con el nombre de la variable dentro, algo 
ash 

blog/templates/blog/postjist.html 


{{ posts }} 


Prueba esto en la plantilla biog/tempiates/biog/post_iist.htmi . Abrela en el editor de codigo, y cambia todo desde el 
segundo <div> hasta el tercer </div> por {{ posts }} . Guarda el archivo y refresca la pagina para ver los resultados: 

I « o o 

*r •+ C 

Django Girls Blog 

r<Post: My second poso, <Post: My first post>l 

Como puedes ver, lo que hemos conseguido es esto: 
blog/templates/blog/postjist.html 


[J Django Girls blog 

15 127.0.0.1:8000 


<QuerySet [<Post: My second post>, <Post: My first post>] > 


Significa que Django lo entiende como una lista de objetos. ^Recuerdas de Introduction a Python como podemos 
mostrar listas? Si, jeon bucles for! En una plantilla de Django se hacen ash 

blog/templates/blog/postjist.html 


{% for post in posts %} {{ post }}{% endfor %} 


Prueba esto en tu plantilla. 


97 










Plantillas de Django 


[] Django Girls blog 

<- CD 127.0.0.1:8000 


Django Girls Blog 

My second post My first post 


jFunciona! Pero queremos que se muestren como los post estaticos que creamos anteriormente en el capitulo de 
Introduccion a HTML. Listed puede mezclar HTMLy etiquetas de plantilla. Nuestro body se vera asi: 

blog/templates/blog/postjist.html 

< div >< hi >< a href = "/" > Django chicas Blog < /a >< / hi >< / div >{% for post in posts %} < div >< p > publicad 
o: {{ post.published_date }} < /p >< hi >< a href = "" >{{ post.title }} < /a >< / hi >< p >{{ post.text|linebreaksbr 
}} < /p >< / div >{% endfor %} 


Todo lo que pongas entre {% for %} y {% endfor %} se repetira para cada objeto de la lista. Refresca la pagina: 


Q Django Girls blog 

«- C fD 127.0.0.1:8000 


Django Girls Blog 

published: June 30,2014,10:58 p.m. 

Mv second post 

Vcstibulum id ligula porta fclis cuismod semper. Cum sociis natoque penatibus ct m; 

justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, co 

conscctetur ac, vcstibulum at eros. Scd posucrc consectetur cst at lobortis. Cum socii 

mattis conscctetur purus sit amet fermentum. 

published: June 29,2014, noon 

Mv first post 

Cum snrik natnnnr'. rw*.natihm r.r maonk rlk namirir'.nf mnnfr*.<i nav/Miir rirlir.iilns mil 
<j,Has notado que utilizamos una notacion diferente esta vez ( {{ post.title }} o {{ post.text }} )? Estamos accediendo 
a los datos en cada uno de los campos definidos en nuestro modelo post . Tambien el | linebreaksbr esta pasando el 
texto de los post a traves de un filtro para convertir saltos de linea en parrafos. 


Una cosa mas 

Seria bueno ver si tu sitio web seguira funcionando en la Internet publica, ino? Vamos a intentar desplegar de nuevo en 
PythonAnywhere. Aqui va un resumen de los pasos... 
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• Lo primero, sube tu codigo a GitHub 
command-line 

$ git status 
[■■■] 

$ git add --all . 

$ git status 
[■■•] 

$ git commit -m "Templates modificados para mostrar post desde base de datos. 
[■■•] 

$ git push 


• Luego, vuelve a entrar en PythonAnywhere y ve a tu consola Bash (o inicia una nueva), y ejecuta: 
PythonAnywhere command-line 

$ cd $USER.pythonanywhere.com 
$ git pull 
[...] 


• Y finalmente, ve a la pagina "Web" y haz click en Reload en tu aplicacion web. (Para ir a otras paginas de 

PythonAnywhere desde la consola, haz click en el boton de la esqulna superior derecha.) Los cambios deberian estar 
visibles en https://yourname.pythonanywhere.com - jcompruebalo en en navegador! Si ves distintas publicaciones en 
el sitio en PythonAnywhere de las que tienes en tu servidor local, es lo normal. Tienes dos bases de datos, una en tu 
ordenador local y otra en PythonAnywhere y no tienen por que tener el mismo contenido. 

iFelicidades! Ahora intenta anadir un nuevo post en tu administrador de Django (recuerda anadir published_date!) 

Asegurate de que estas en el administrador de Django de pytonanywhere, https://tunombre.pythonanywhere.com/admin. 

Luego actualiza tu pagina para ver si los post aparecen. 

^.Funciona de maravilla? jEstamos orgullosas! Alejate un rato del ordenador, te has ganado un descanso. :) 
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CSS - jQue quede bonito! 


Nuestro blog todavia es un poco feo, ^no te parece? jEs hora de ponerlo bonito! Para eso, vamos a usar CSS. 

<j,Que es CSS? 

El lenguaje CSS (las siglas en ingles de hojas de estilos en cascada, o Cascading Style Sheets) sirve para describir la 
apariencia de un sitio web escrito en un lenguaje de marcado (como HTML). Es como la capa de pintura para nuestra 
pagina web. ;) 

Pero no queremos empezar de cero otra vez, ^.verdad? De nuevo vamos a usar algo que otros programadores han 
publicado ya en Internet. Estar siempre reinventando la rueda no mola. 

jVamos a usar Bootstrap! 

Bootstrap es uno de los frameworks de HTML y CSS mas populares para desarrollar para sitios web atractivos: 

https://getbootstrap.com/ 

Lo escribieron programadores que trabajaban en Twitter. jAhora lo mantienen y desarrollan voluntarios de todo el mundo! 

Instalar Bootstrap 

Para instalar Bootstrap, abre tu fichero .htmi en el editor de codigo y anade esto a la seccion <head> : 
blog/templates/blog/postjist.html 


clink rel=" stylesheet" href="//maxcdn .bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
clink rel=" stylesheet" href="//maxcdn .bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 


Esto no anade ningun archivo a tu proyecto. Solo apunta a archivos que existen en Internet. Asi que adelante, accede a tu 
sitio web y refresca la pagina jAqui la tienes! 


0 o o 


j 


Q Django Girls blog 



CD 127.0.0.1:8000 

Django Girls Blog 


published: June30,2014,10:58 p.m. 


My second post 

Vestibulum id ligula porta felis euisrriod semper. Cum sociis natoque penatibus e 
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor si 


jYa tiene mejor pinta! 


Archivos estaticos (static files) en Django 
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Finalmente nos vamos a fijar en esto que hemos estado llamando archivos estaticos. Los archivos estaticos son los 
archivos CSS e imagenes. Su contenido no depende del contexto de la peticion y siempre sera el mismo para todos los 
usuarios. 


Donde poner los archivos estaticos en Django 

Django ya sabe donde encontrar los archivos estaticos de la app "admin". Ahora necesitamos anadir los archivos estaticos 
de nuestra aplicacion, blog . 

Crearemos una carpeta llamada static dentro de la app blog: 


djangogirls 
|— blog 

|— migrations 
|— static 
1 — templates 
1 — mysite 


Django encontrara automaticamente cualquier carpeta llamada "static" dentro de cualquiera de las carpetas de tus apps. 
Podra usar su contenido como archivos estaticos. 

jTu primer archivo CSS! 

Vamos a crear un archivo CSS, para anadir tu propio estilo a la pagina. Crea un nuevo directorio llamado css dentro de la 
carpeta static . A continuation, crea un nuevo archivo llamado blog.css dentro de la carpeta css . ^,Listos? 


djangogirls 

1 - blog 

1 - static 

1 - css 


blog.css 


jVamos a escribir algo de CSS! Abre el archivo biog/static/css/biog.css en el editor de codigo. 

No vamos a profundizar demasiado en como personalizar y aprender CSS. Pero te podemos recomendar un un curso 
gratuito de CSS al final de esta pagina por si quieres aprender mas. 

Pero vamos a hacer al menos un poco. <[,Que te parece si cambiamos el color del titulo? Los ordenadores utilizan codigos 
especiales para expresar los colores. Estos codigos empiezan con # seguidos por 6 letras (A-F) y numeros (0-9). Por 
ejemplo, el codigo del color azul es soggoff . Puedes encontrar los codigos de muchos colores aqui: 
http://www.colorpicker.com/ y en otras paginas web. Tambien puedes utilizar colores predefinidos utilizando su nombre en 
ingles, como red y green . 

En el archivo biog/static/css/biog.css deberlas anadir el siguiente codigo: 
blog/static/css/blog.css 

hi a { 

color: #FCA2Q5; 

} 

hi a es un selector CSS. Esto significa que se va a aplicar el estilo a cualquier elemento a que este dentro de un 
elemento hi . Asi, cuando tenemos algo como <hi><a href="">iink</a></hi> , se aplicara el estilo hi a . En este caso le 
estamos diciendo que cambie el color a #fca205 , que es naranja. jO puedes poner el color que tu quieras! 


En un archivo CSS se definen los estilos de los elementos que aparecen en el archivo HTML. La primera forma de 
identificar los elementos es por su nombre. Puede que los recuerdes como 'tags' de la section de HTML. Cosas como a , 
hi , y body son algunos ejemplos de nombres de elementos. Tambien podemos identificar elementos por el atributo 
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class o el atributo id . Los valores de "class" e "id" son nombres que das al elemento para poderlo identificar. Con el 
atributo "class" identificamos grupos de elementos del mismo tipo y con el atributo "id" identificamos un elemento 
especifico. Por ejemplo, el siguiente elemento lo podrias identificar por su nombre de "tag" a , por su "class" 

external_link , O por SU "id" link_to_wiki_page : 

<a href="https://en.Wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page"> 


Si quieres aprender mas sobre los selectores CSS puedes consultar en Selectores de CSS en w3schools. 

Tambien necesitamos decide a nuestra plantilla HTML que hemos anadido codigo CSS. Abre el archivo 
biog/tempiates/biog/post_iist. htmi en el editor de codigo y anade esta linea al principio del todo: 

blog/templates/blog/postjist.html 


{% load static %} 


Aqui solo estamos cargando archivos estaticos. :) Entre las etiquetas <head> y </head> , despues de los enlaces a los 
archivos CSS de Bootstrap, anade esta linea: 

blog/templates/blog/postjist.html 


clink rel="stylesheet" href="{% static 'css/blog.css' %}"> 


El navegador lee los archivos en el orden que le son dados, por lo que debemos asegurarnos de que esta en el lugar 
correcto. De lo contrario, el codigo en nuestro archivo podria ser reemplazado por codigo en nuestros archivos Bootstrap. 
Le acabamos de decir a nuestra plantilla donde se encuentra nuestro archivo CSS. 

Ahora tu archivo debe tener este aspecto: 

blog/templates/blog/postjist.html 


{% load static %} 

<html> 

<head> 

<title>Django Girls blog</title> 

clink rel=" stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
clink rel=" stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
clink rel="stylesheet" href="{% static 1 css/blog.css 1 %}"> 
c/head> 
cbody> 
cdiv> 

chl>ca href="/">Django Girls Blogc/a>c/hl> 
c/div> 

{% for post in posts %} 
cdiv> 

cp>published: {{ post.published_date }}</p> 
chl>ca href="">{{ post.title }}c/a>c/hl> 
cp>{{ post.text | linebreaksbr }}</p> 
c/div> 

{% endfor %} 
c/body> 
c/html> 


De acuerdo, jguarda el archivo y actualiza el sitio! 
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® ® ^ 0 Django Girls blog 

4- e fo 127.0.0.1:8000 


Django Girls Blog 

published: June 30,2014,10:58 p.m. 

My second post 

Vestibulum id ligula porta felis euismod semper. Cum sociis natoque 

jBuen trabajo! <^Tal vez nos gustaria tambien dar un poco de aire a nuestro sitio web y aumentar el margen en el lado 
izquierdo?. jVamos a intentarlo! 

blog/static/css/blog.css 


body { 

padding-left: 15px; 

> 


Anade esto a tu CSS, guarda el archivo y jmira como funciona! 



Q Django Girls blog x 

<r ~> C 

D 127.0.0.1:8000 


Django Girls Blog 

published: June30,2014,10:58 p.m. 

My second post 

Vestibulum id ligula porta felis euismod semper. Cum sociis natoque p 

^Quiza podriamos personalizar la tipografia del titulo? Pega esto en la seccion <head> del archivo 

blog/templates/blog/post_list.html ! 

blog/templates/blog/postjist.html 


clink href="//fonts. googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css"> 


Como antes, revisa el orden y pon antes del enlace a biog/static/css/biog.css . Esta linea importara un estilo de letra 
llamada Lobster de Google Fonts (https://www.google.com/fonts). 
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Encuentra el bloque de declaration (el codigo entre las Naves { y } ) hi a en el archivo CSS 
biog/static/css/biog.css . Ahora anade la linea font-family: 'Lobster'; entre las Naves y actualiza la pagina: 

blog/static/css/blog.css 

hi a { 

color: #FCA205; 
font-family: 'Lobster'; 

> 


Django Girls blog 

C ^ 127.0.0.1:8000 


'DjangtyQirU'BLoy 

published: June30,2014,10:58 p.m. 

My second post 

Vestibulum id ligula porta felis euismod semper. Cum sociis natoq 

jGenial! 

Como ya hemos dicho, CSS tiene un concepto de clases. Las clases te permiten dar un nombre a una parte del codigo 
HTML para aplicar estilos solo a esta parte, sin afectar a otras. jEsto puede ser super util! Quiza tienes dos divs haciendo 
algo diferente (como el encabezado y el texto de tu publication). Las clases pueden ayudarte a asignarles estilos distintos. 

Adelante, nombra algunas partes del codigo HTML. Anade una clase llamada page-header a tu div que contiene el 
encabezado, asi: 

blog/templates/blog/postjist.html 


<div class="page-header"> 

<hl><a href="/">Django Girls Blog</a></hl> 
</div> 


Y ahora anade una clase post a tu div que contiene una publicacion del blog, 
blog/templates/blog/postjist.html 


<div class="post"> 

<p>published: {{ post.published_date }}</p> 
<hl><a href="">{{ post.title }}</a></hl> 
<p>{{ post.text|linebreaksbr }}</p> 

</div> 


Ahora anadiremos bloques de declaration a varios selectores. Los selectores que comienzan con . hacen referenda a 
clases. Hay muchos tutoriales y explicaciones excelentes sobre CSS en la Web que te pueden ayudar a entender el 
codigo que sigue a continuation. Por ahora, copia y pega lo siguiente en tu archivo biog/static/css/biog.css : 

blog/static/css/blog.css 
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.page-header { 

background-color: #ff9400; 
margin-top: 0; 

padding: 20px 20px 20px 40px; 

} 

.page-header hi, .page-header hi a, .page-header hi a:visited, .page-header hi a:active { 
color: 

font-size: 36pt; 
text-decoration: none; 

} 

.content { 

margin-left: 40px; 

} 

hi, h2, h3, h4 { 

font-family: 'Lobster', cursive; 

} 


.date { 

float: right; 
color: #828282; 


.save { 

float: right; 

} 


.post-form textarea, .post-form input { 
width: 100%; 

} 


.top-menu, .top-menu:hover, .top-menu:visited { 
color: #ffffff; 
float: right; 
font-size: 26pt; 
margin-right: 20px; 


.post { 

margin-bottom: 70px; 

} 


.post hi a, .post hi a:visited { 
color: #000000; 

> 


Luego rodea el codigo HTML que muestra los posts con declaraciones de clases. Cambia esto: 
blog/templates/blog/postjist.html 


{% for post in posts %} 

<div class="post"> 

<p>published: {{ post.published_date }}</p> 
<hl><a href="">{{ post.title }}</a></hl> 
<p>{{ post.text|linebreaksbr }}</p> 

</div> 

{% endfor %} 

en blog/templates/blog/post_list.html por esto: 
blog/templates/blog/postjist.html 
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<div class="content container"> 

<div class="row"> 

<div class="col-md-8"> 

{% for post in posts %} 

<div class="post"> 

<div class="date"> 

<p>published: {{ post.published_date }}</p> 
</div> 

<hl><a href="">{{ post.title }}</a></hl> 
cp>-C-C post. text | linebreaksbr }}</p> 

</div> 

{% endfor %} 

</div> 

</div> 

</div> 


Guarda estos archivos y recarga tu sitio. 


IQ Django Girls blog 

C ^127.0.0.1:8000 


VjanqfrQirWBlog, 


published: June 30,2014,10:58 p.m. 

My second pool 

Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum 
sooiis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adiplscing 
elit. Morbi leo rlsus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit 
amet fermentum. 


jWoohoo! Queda genial, ^.Verdad? Mira el codigo que acabamos de pegar para encontrar los lugares donde anadimos 
clases en el HTML y las usamos en el CSS. ^Que cambiarias si quisieras que la fecha fuera color turquesa? 

No tengas miedo a experimentar con este CSS un poco y tratar de cambiar algunas cosas. Jugar con el CSS te puede 
ayudar a entender lo que hacen las distintas secciones. Si algo deja de funcionar, no te preocupes, jsiempre puedes 
deshacerlo! 

Realmente te recomendamos seguir este Curso de HTML y CSS de CodeAcademy. Puede ayudarte a aprender todo lo 
que necesitas para hacer tus websites mas bonitos con CSS. 

ii,Lista para el siguiente capitulo?! :) 
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Extendiendo plantillas 


Otra cosa buena que tiene Django es la extension de plantillas. <[,Que significa? Significa que puedes reusar partes del 
HTML para diferentes paginas del sitio web. 

Las plantillas son utiles cuando quieres utilizar la misma informacion o el mismo diseno en mas de un lugar. No tienes que 
repetirte a ti misma en cada archivo. Y si quieres cambiar algo, no tienes que hacerlo en cada plantilla, solo en una! 


Crea una plantilla base 

Una plantilla base es la plantilla mas basica que extiendes en cada pagina de tu sitio web. 
Vamos a crear un archivo base.html en blog/templates/blog/ : 


blog 


-templates 
1 -blog 

base.html 
post_list.html 


Ahora, abrelo en el editor de codigo y copia todo el contenido de post_iist.html en base.html , asi: 
blog/templates/blog/base.html 


{% load static %} 

<html> 

<head> 

<title>Django Girls blog</title> 

clink rel=" stylesheet" href="//maxcdn .bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

clink rel=" stylesheet" href="//maxcdn .bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min. css"> 

clink href= '//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel= 'stylesheet' type=' text/css 1 

> 

clink rel="stylesheet" href="{% static 1 css/blog.css' %}"> 
c/head> 
cbody> 

cdiv class="page-header"> 

chl>ca href="/">Django Girls Blogc/a>c/hl> 
c/div> 

cdiv class="content container"> 
cdiv class="row"> 

cdiv class="col-md-8"> 

{% for post in posts %} 
cdiv class="post"> 

cdiv class="date"> 

{{ post.published_date }} 
c/div> 

chl>ca href="">{{ post.title }}c/a>c/hl> 

< p > -f-C post. text | linebreaksbr }}</p> 
c/div> 

{% endfor %} 
c/div> 
c/div> 
c/div> 
c/body> 
c/html> 


Luego, en base.html reemplaza por completo tu <body> (todo lo que haya entre <body> and </body> ) con esto: 
blog/templates/blog/base.html 
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<body> 

<div class="page-header"> 

<hl><a href="/">Django Girls Blog</a></hl> 
</div> 

<div class="content container"> 

<div class="row"> 


<div class="col-md-8"> 
{% block content %} 

{% endblock %} 

</div> 

</div> 

</div> 

</body> 


Seguro que ya te has dado cuenta de que lo que hemos hecho ha sido cambiar todo lo que habia entre {% for post in 
posts %} y {% endfor %} por 

blog/templates/blog/base.html 


{% block content %} 
{% endblock %} 


Pero ^.por que? jAcabas de crear un bloque! Hemos usado la etiqueta de plantilla {% block %} para crear un area en la 
que se insertara HTML. Ese HTML vendra de otra plantilla que extiende esta ( base.html ). Enseguida te ensenamos como 
se hace. 

Ahora guarda base.html y abre biog/tempiates/biog/post_iist.htmi de nuevo en el editor. Quita todo lo que hay encima 
de {% for post in posts %} y por debajo de {% endfor %} . Cuando termines, el archivo tendra este aspecto: 

blog/templates/blog/postjist.html 


{% for post in posts %} 

<div class="post"> 

<div class="date"> 

{{ post.published_date }} 

</div> 

<hl><a href="">{{ post.title }}</a></hl> 
<p>{{ post.text|linebreaksbr }}</p> 
</div> 

{% endfor %} 


Queremos utilizar esto como parte de nuestra plantilla en los bloques de contenido. jEs hora de anadir etiquetas de bloque 
en este archivo! 

Tu etiqueta de bloque debe ser la misma que la etiqueta del archivo base.html . Tambien querras que incluya todo el 
codigo que va en los bloques de contenido. Para ello, pon todo entre {% block content %} y {% endblock %} . Algo como 
esto: 

blog/templates/blog/postjist.html 


{% block content %} 

{% for post in posts %} 

<div class="post"> 

<div class="date"> 

{{ post.published_date }} 

</div> 

<hl><a href="">{{ post.title }}</ax/hl> 
< p > -{]-C post. text | linebreaksbr }}</p> 
</div> 

{% endfor %} 

{% endblock %} 
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Solo falta una cosa. Tenemos que conectar estas dos plantillas. jEsto es lo que significa extender plantillas! Para eso 
tenemos que anadir una etiqueta "extends" al comienzo del archivo. Asi: 

blog/templates/blog/postjist.html 

{% extends 'blog/base.html' %} 

{% block content %} 

{% for post in posts %} 

<div class="post"> 

<div class="date"> 

{{ post.published_date }} 

</div> 

<hl><a href="">{{ post.title }}</a></hl> 

< p > -C-C post. text | linebreaksbr }}</p> 

</div> 

{% endfor %} 

{% endblock %} 


jY ya esta! Guarda el fichero y comprueba que el sitio web sigue funcionando como antes. :) 

Si te sale el error TempiateDoesNotExist , que significa que no hay ningun archivo biog/base.htmi y tienes 
runserver corriendo en la consola. Intenta pararlo, pulsando Ctrl+C (teclas Control y C a la vez) en la consola y 
reiniciarlo con el comando python manage.py runserver . 
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Extiende tu aplicacion 

Ya hemos completado todos los pasos necesarios para la creacion de nuestro sitio web: sabemos como escribir un model, 
url, view y template. Tambien sabemos como hacer que nuestro sitio web tenga buen aspecto. 

jHora de practicar! 

Lo primero que necesitamos en nuestro blog es, obviamente, una pagina para mostrar un post, ^cierto? 

Ya tenemos un modelo post , asi que no necesitamos anadir nada a models.py . 


Crea un enlace a la pagina de detalle de una publicacion 

Empezaremos anadiendo un enlace al fichero biog/tempiates/biog/post_iist.htmi . Abrelo en el editor; de momento 
deberia tener este contenido: 

blog/templates/blog/postjist.html 

{% extends 'blog/base.html' %} 

{% block content %} 

{% for post in posts %} 

<div class="post"> 

<div class="date"> 

{{ post.published_date }} 

</div> 

<hl><a href="">{{ post.title }}</a></hl> 

< p > -C-C post. text | linebreaksbr }}</p> 

</div> 

{% endfor %} 

{% endblock %} 


Queremos tener un link del titulo de una publicacion en la lista de publicaciones al detalle de la misma. Vamos a cambiar 
<hi><a href="">{{ post.title }}</a></hi> para que se enlace a la pagina de detalles de publicacion: 

blog/templates/blog/postjist.html 


<hl><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></hl> 


Es hora de explicarel misterioso {% url 'post_detaii' pk=post.pk %} . Como probablemente sospeches, la notacion {% 

%} significa que estamos utilizando Django template tags. jEsta vez usaremos uno que creara un URL para nosotros! 

La parte de post_detaii significa que Django estara esperando un URL en biog/uris.py con el nombre=post_detail 

l,y ahora que pasa con < 0>pk=post.pk</code>? pk se refiere a primary key (clave primaria), la cual es un nombre unico 
por cada registro en una base de datos. Debido a que no especificamos una Nave primaria en nuestro modelo post , 
Django creara una por nosotros (por defecto, un numero que incrementa una unidad por cada registro, por ejemplo, 1,2, 
3) y lo anadira como un campo llamado pk a cada uno de nuestros posts. Accedemos a la clave primaria escribiendo 
post. pk , del mismo modo en que accedemos a otros campos ( titulo , autor , etc.) en nuestro objeto post ! 

Ahora cuando vayamos a: http://127.0.0.1:8000/ tendremos un error (como era de esperar, ya que no tenemos una URL o 
una vista para post„detaii ). Se vera asi: 
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• • • < in 127.0.0.1 

NoReverseMatch at / 



Reverse for 'post_detail' with arguments '()' and keyword arguments 
'{'pk':"}' not found. 0 pattern(s) tried: [] 

Request GET 
Method: 

Request http://127.0.0.1:8000/ 

URL: 

Django 1.7 
Version: 

Exception NoReverseMatch 
Type: 

Exception Reverse for 'post_detail' with arguments '()' and keyword arguments '{'pk': 'not 
Value: patterns) tried: [] 


Crea una URL al detalle de una publication 

Vamos a crear una URLen uris.py para nuestra view post_detaii ! 

Queremos que el detalle de la primera entrada se visualice en esta URL: http://127.0.0.1:8000/post/1/ 

Vamos a crear una URLen el fichero biog/uris.py que dirija a Django hacia una vista llamada post_detaii , que 
mostrara una entrada de blog completa. Abre el fichero biog/uris.py en el editor, y anade la linea 
path('post/<int:pk>)/ 1 , views.post_detaii, name='post_detaii 1 ), para que el fichero quede asi: 

blog/urls.py 


from django.urls import path 
from . import views 

urlpatterns = [ 

path('', views.post_list, name=' post_list' ), 

path(' post/<int:pk>/' , views.post_detail, name= 1 post_detail' ), 


Esta parte post/<int :pk>/ especifica un patron de URL-ahora lo explicamos: 

• post/ significa que la URL deberia empezar con la palabra post seguida por una /. Hasta aqui bien. 

• <int: pk> - esta parte tiene mas miga. Significa que Django buscara un numero entero y se lo pasara a la vista en 
una variable llamada pk . 

• / - necesitamos otra / al final de la URL. 

Esto quiere decir que si pones http://i27.0.o.i:8000/post/5/ en tu navegador, Django entendera que estas buscando 
una vista llamada post_detaii y transferira la informacion de que pk es igual a 5 a esa vista. 

OK, hemos anadido un nuevo patron de URL a biog/uris.py ! Actualizamos la pagina: http://127.0.0.1:8000/ y boom! El 
servidor vuelve a dejar de funcionar. Echa un vistazo a la consola - como era de esperar, hay otro error! 
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return bootstrap, gcd import(name[level:], package, level) 

File "<frozen importlib. bootstrap^', line 2231, in gcd import 
File "<frozen importlib. bootstrap:*", line 2214, in find and load 

File "<frozen importlib. bootstraps*", line 2203, in find and load unlocked 

File "<frozen importlib. bootstrap^', line 1200, in load unlocked 

File "<frozen importlib. bootstrap^', line 1129, in exec 

File "<frozen importlib. bootstrap^', line 1448, in exec module 
File "<frozen importlib. bootstrap;*", line 321, in call with frames removed 
File "/home/hel/code/djangogirls/workthrough/blog/urls.py”, line 6, in <module> 
url(r ,A post/(?P<pk>[0-9]+)/$', views.post detail, name='post detail'), 
AttributeError: 'module' object has no attribute 'post detail' 


^Recuerdas cual es el proximo paso? jAnadir una vista! 


Anade la vista de detalle de la publicacion 

Esta vez nuestra vista tomara un parametro adicional pk . Nuestra vista necesita recibirlo, i,verdad? Asi que definiremos 
nuestra funcion como def post_detaii (request, pk): . Ten en cuenta que tenemos que usarexactamente el mismo 
nombre que especificamos en las urls ( pk ). jOmitir esta variable es incorrecto y resultara en un error! 

Ahora, queremos obtener solo un post. Para ello podemos usar querysets como este: 

blog/views.py 


Post.objects.get(pk=pk) 


Pero este codigo tiene un problema. Si no hay ningun post con esa clave primaria ( pk ), jtendremos un error muy feo! 


0OO 

_ J 

<- -» c 


|2l DoesNotExist at /post/10/ x 

["[j - 127.0.0.1:8000/post/10/ 


DoesNotExist at /post/10/ 


Post matching query does not exist. 


Request Method: 

Request URL: 
Django Version: 
Exception Type: 
Exception Value: 


GET 

http://127.0.0.1:8000/post/10/ 

1.6.4 

DoesNotExist 

Post matching query does not exist. 


jNo queremos eso! Por suerte, Django tiene una funcion que se encarga de eso: get_object_or_404 
haya ningun post con el pk dado se mostrara una pagina mucho mas agradable, page Not Found 


. En caso de que no 

404 . 


112 









Amplia tu aplicacion 



La buena noticia es que puedes crear tu propia pagina Page Not Found y disenarla como desees. Pero por ahora no es tan 
importante, asi que lo omitiremos. 

jEs hora de agregar una view a nuestro archivo views, py ! 

En biog/uris. py creamos un regia de URL denominada post_detaii que hace referencia a una vista llamada 
view.post„detaii . Esto significa que Django va a estar esperando una funcion llamada post_detaii de vista en 

blog/views.py . 

Deberiamos abrir biog/views.py en el editor y anadir el siguiente codigo cerca de los otros import from: 
blog/views.py 


from django.shortcuts import render, get_object_or_404 


Y al final del archivo agregamos nuestra view: 
biog/views.py 


def post_detail( request, pk): 

post = get_object_or_404(Post, pk=pk) 

return render(request, 'blog/post_detail.html' , {'post': post}) 


Si. Es hora de actualizar la pagina: http://127.0.0.1:8000/ 
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(J Django Girls Blog 

«- C ^ 127.0.0.1:8000 


DjanqtyQirU 


\fhiUafadlM 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum sapien ii 
massa et, hendrerit leo. Nam commodo facilisis sapien vitae ornare. Integer ege 


Twice vehiculafeugial augue eget 
cofuectetur 

Pellentesque venenatis elittortor, eu dictum magna accumsan in. Aenean vestit 
eleifend mattis purus suscipit a. Ut vitae pellentesque lorem. Integer lobortis orci 

jFunciono! Pero .-.que P asa cuando haces click en un enlace en el titulo del post? 
j Q TemplateDoesNotExist at x _ 

CD 12 7.0.0.1:8000/post/3/ 

TemplateDoesNotExist at /post/3/ 

blog/post_detail.html 

Request Method: GET 

Request URL: http://127.0.0.1:8000/post/3/ 

Django Version: 1.6.4 
Exception Type: TemplateDoesNotExist 
Exception Value: blog/post_detail.html 

jOh no! jOtro error! Pero ya sabemos como lidiar con eso, i,no? jTenemos que anadir una plantilla! 

Crear una plantilla para post detail 

Vamos crear un fichero en biog/tempiates/biog llamado post_detaii.html , y abrirlo en el editor de codigo. 
Se vera asi: 

blog/templates/blog/post_detail.html 
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{% extends 1 blog/base.html' %} 

{% block content %} 

<div class="post"> 

{% if post.published_date %} 

<div class="date"> 

{{ post.published_date }} 
</div> 

{% endif %} 

<hl>{{ post.title }}</hl> 
cp>-C-C post. text | linebreaksbr }}</p> 
</div> 

{% endblock %} 


Una vez mas estamos extendiendo base.html . En el bloque content queremos mostrar la fecha de publication (si 
existe), titulo y texto de nuestros posts. Pero deberiamos discutir algunas cosas importantes, ^.cierto? 

{% if ... %} ... {% endif %} es un template tag que podemos usar cuando querramos ver algo. (Recuerdas if ... else 
.. del capitulo Intruduccion a Python?) Ahora queremos mirar si la pubiished_date de un post no esta vacia. 

Bien, podemos actualizar nuestra pagina y ver si TempiateDoesNotExist se ha ido. 


☆ » = 


June 28, 2014, 3:48 p.m 


D Django Girls Blog 


800 


«- CD 127.0.0.1:8000/post/3/ 


'Djjang&QirU 


fluUafadUai 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum sapien interdum, posuere 
massa et, hendrerit leo. Nam commodo facilisis sapien vitae ornare. Integer eget purus posuere, 
vestibulum arcu at, pulvinar elit. Integer eleifend, nisi a molestie auctor, dui arcu ultricies erat, sed 
dapibus ante tellus id est. Aliquam erat volutpat. Vestibulum tellus est, ultrices nec iaculis sit amet, 
hendrerit in mauris. Suspendisse lacinia mi in magna tincidunt, sed convallis ipsum semper. Class 
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vitae leo 
suscipit, hendrerit mi eget, tincidunt quam. In interdum risus nec faucibus fermentum. Duis vestibulum 
lacus et erat aliquet, nec iaculis orci porta. Nullam quis metus massa. 


jYay! jFunciona! 


Hora de despliegue! 


Seria bueno verificar que tu sitio web aun funcionara en PythonAnywhere, ^cierto? Intentemos desplegar de nuevo. 
command-line 
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$ git status 
$ git add -A . 

$ git status 

$ git commit -m "Agregadas vistas y plantilla para el detalle del post del blog asi como tambien CSS para el sitio. 
$ git push 

Luego, en una consola Bash de PythonAnywhere: 

command-line 


$ cd ~/<your-pythonanywhere-username>.pythonanywhere.com 
$ git pull 
[...] 


(Recuerda sustituir <your-pythonanywhere-username> con tu nombre de PythonAnywhere real, sin los signos de angulo). 

Actualizar los ficheros estaticos (static files) en el servidor 

Normalmente, los servidores como PythonAnywhere tratan los ficheros estaticos (como los ficheros CSS) de manera 
diferente a los ficheros de Python. Se llaman estaticos porque el servidor no debe ejecutarlos, sino servirlos tal cual. Y por 
ello se tratan por separado para servirlos mas rapido. Como consecuencia, si cambiamos nuestros ficheros CSS, tenemos 
que ejecutar un comando extra en el servidor para decide que los actualice. Este comando se llama coiiectstatic . 

Activa el virtualenv si no estaba activado de antes (en PythonAnywhere se usa el comando workon , es igual que el 
comando source myenv/bin/activate que usamos en local): 

command-line 

$ workon <your-pythonanywhere-username>.pythonanywhere.com 
(ola.pythonanywhere.com)S python manage.py coiiectstatic 
[...] 

El comando manage.py coiiectstatic es un poco como el comando manage.py migrate . Hacemos cambios en nuestro 
codigo y luego le decimos a Django que los aplique, bien a la coleccion de ficheros estaticos o bien a la base de datos. 

En cualquier caso, ya podemos ir a la pagina "Web" (boton en la esquina superior derecha de la consola), hacer click en 
Reload, y mirar la pagina https://yourname.pythonanywhere.com para ver el resultado. 

jY eso deberia ser todo! Felicidades :) 
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Formularios de Django 

Lo ultimo que haremos en nuestro sitio web sera crear una forma agradable de agregar y editar posts en el blog. El admin 
de Django esta bien, pero es bastante dificil de personalizar y hacerlo bonito. Con forms tendremos un poder absoluto 
sobre nuestra interfaz; jpodemos hacer casi cualquier cosa que podamos imaginar! 

Lo bueno de los formularios de Django es que podemos definirlos desde cero o crear un ModeiForm , el cual guardara el 
resultado del formulario en el modelo. 

Esto es exactamente lo que queremos hacer: crearemos un formulario para nuestro modelo post . 

Como cada parte importante de Django, los formularios tienen su propio archivo: forms.py . 

Necesitamos crear un archivo con este nombre en el directorio blog . 


blog 


forms.py 


Vale, abrelo en el editor de codigo y teclea lo siguiente: 
blog/forms.py 

from django import forms 
from .models import Post 
class PostForm(forms .ModeiForm) : 

class Meta: 

model = Post 

fields = ('title', 'text',) 


Lo primero, necesitamos importar Django forms ( from django import forms ) y nuestro modelo post ( from .models import 
Post ). 

postForm , como probablemente sospechas, es el nombre de nuestro formulario. Necesitamos decide a Django que este 
formulario es un ModeiForm (asi Django hara algo de magia por nosotros) - forms.ModeiForm es responsable de ello. 

Luego, tenemos class Meta , donde le decimos a Django que modelo debe ser utilizado para crear este formulario ( model 
= Post ). 

Finalmente, podemos decir que campo(s) deberlan estar en nuestro formulario. En este escenario solo queremos title y 
text para ser mostrados - author sera la persona que esta conectada (jtu!) y created_date se definira 
automaticamente cuando creemos un post (es decir, en el codigo), ^cierto? 

jY eso es todo! Todo lo que necesitamos hacer ahora es usar el formulario en una view y mostrarla en una plantilla. 

Una vez mas vamos a crear: un enlace a la pagina, una direction URL, una vista y una plantilla. 

Enlace a una pagina con el formulario 

Ahora toca abrir el fichero biog/tempiates/biog/base.htmi en el editor. Vamos a anadir un enlace en el div llamado 
page-header ! 

blog/templates/blog/post_base.html 


<a href="{% url 'post_new' %}" class="top-menu"xspan class="glyphicon glyphicon-plus"x/spanx/a> 
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Ten en cuenta que queremos llamar a nuestra nueva vista post_new . La clase "giyphicon giyphicon-pius" es 
proporcionada por el tema de bootstrap que estamos utilizando, y nos mostrara un signo de suma. 

Despues de agregar la linea, tu archivo html deberia lucir de esta forma: 

blog/templates/blog/post_base.html 


{% load static %} 

<html> 

<head> 

<title>Django Girls blog</title> 

<link rel=" stylesheet" href="//maxcdn. bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min. css"> 

<link rel=" stylesheet" href="//maxcdn. bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min. css"> 

<link href= '//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel= 'stylesheet' type=' text/css 1 

> 

<link rel="stylesheet" href="{% static 1 css/blog.css' %}"> 

</head> 

<body> 

<div class="page-header"> 

<a href="{% url 'post__new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"x/spanx/a> 

<hl><a href="/">Django Girls Blog</ax/hl> 

</div> 

<div class="content container"> 

<div class="row"> 

<div class="col-md-8"> 

{% block content %} 

{% endblock %} 

</div> 

</div> 

</div> 

</body> 

</html> 


4 


Despues de guardar y refrescar la pagina http://127.0.0.1:8000 veras el - ya conocido - error NoReverseMatch . <^Es asi? 
jVamos bien! 


URL 


Abrimos biog/uris.py en el editor para anadir una linea: 
blog/urls.py 


path( 'post/new' , views.post_new, name=' post_new' ), 


Y el codigo final tendra este aspecto: 
blog/urls.py 


from django.urls import path 
from . import views 

urlpatterns = [ 

path('', views.post_list, name=' post_list' ), 

path( 1 post/<int:pk>/' , views.post_detail, name= 'post_detail' ), 

path( 1 post/new/' , views.post_new, name= 1 post_new' ), 


Despues de actualizar el sitio, veremos un AttributeError , puesto que no tenemos la vista post_new implementada. 
Anadamosla de una vez. 


Vista post_new 
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Ahora abre el fichero biog/views.py en el editor y anade estas lineas con el resto de imports from : 
blog/views.py 


from .forms import PostForm 


Y ahora nuestra vista: 
blog/views.py 


def post_new( request) : 

form = PostForm() 

return render(request, 'blog/post_edit.html' , {'form': form}) 


Para crear un nuevo formulario post , tenemos que llamar a PostFormf) y pasarlo a la plantilla. Volveremos a esta w'sfa 
pero, por ahora, vamos a crear rapidamente una plantilla para el formulario. 


Plantilla 

Tenemos que crear un fichero post_edit. html el el directorio biog/tempiates/biog , y abrirlo en el editor de codigo. Para 
hacer que un formulario funcione necesitamos varias cosas: 

• Tenemos que mostrarel formulario. Podemos hacerlo, porejemplo, con un sencillo {{ form.as_p }} . 

• La linea anterior tiene que estar dentro de una etiqueta de formuLario HTML: <form method="posT">.. ,</form> . 

• Necesitamos Un boton Guardar . Lo hacemOS COn Un boton HTML: <button type='submit'>Save</button> . 

• Finalmente justo despues de abrir la etiqueta <form ...> tenemos que anadir {% csrf_token %} . jEsto es muy 
importante ya que hace que tus formularios sean seguros! Si olvidas este pedazo, Django se molestara cuando 
intentes guardar el formulario: 


® O O 403 rorbidden 

CD 12 7.0.0.1:8000/post/new/ 


Forbidden (403) 

CSRF verification failed. Request aborted. 

Help 

Reason given for failure: 

CSRF token missing or incorrect. 

Bueno, miremos se deberia ver el HTML en post_edit. html : 
blog/templates/blog/post_edit.html 

{% extends 'blog/base.html' %} 

{% block content %} 

<hl>New post</hl> 

<form method="POST" class="post-form">{% csrf_token %} 

{{ form.as_p }} 

<button type="submit" class="save btn btn-default">Save</button> 
</form> 

{% endblock %} 


jEs hora de actualizar! jSi! jTu formulario se muestra! 
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<=* o 
1^ * 

^ J 0 Django Girls Blog x 

C Q 12 7.0.0. l:8000/post/new/ 

1 

)JongeQirU 

I flew pool 

Title: 

1 L 


r 

ixt: 


Pero, jun momento! Si escribes algo en los campos title y text y tratas de guardar los cambios - ^que pasara? 

jNada! Una vez mas estamos en la misma pagina y el texto se ha ido... no se anade ningun post nuevo. Entonces, i,que 
ha ido mal? 

La respuesta es: nada. Tenemos que trabajar un poco mas en nuestra vista. 


Guardar el formulario 

Abre blog/views. py de nuevo en el editor. De momento todo lo que tenemos en la vista post jew es lo siguiente: 
blog/views.py 


def post_new( request) : 
form = PostForm() 

return render(request, 'blog/post_edit.html' , {'form': form}) 


Cuando enviamos el formulario somos redirigidos a la misma vista, pero esta vez tenemos algunos datos adicionales en 
request , mas especificamente en request .post (el nombre no tiene nada que ver con un post del blog, se refiere a que 
estamos "publicando" -en ingles, posting- datos). ^.Recuerdas que en el archivo HTML la definition de <form> tenia la 
variable method="posT" ? Todos los campos del formulario estan ahora en request .post . No deberias renombrar la 
variable post (el unico nombre que tambien es valido para la variable method es get , pero no tenemos tiempo para 
explicar cual es la diferencia). 

En nuestra vista tenemos dos situaciones distintas que manejar: primero, cuando accedemos a la pagina por primera vez y 
queremos un formulario vacio, y segundo, cuando regresamos a la vista con los datos del formulario que acabamos de 
ingresar. Asi que tenemos que anadir una condition (utilizaremos if para eso): 

blog/views.py 
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if request.method == "POST": 
[■■■] 

else: 

form = PostForm() 


Es hora de rellenar los puntos [...] . Si el metodo es post entonces querremos construir el PostForm con datos del 
formulario, cierto? Lo haremos de la siguiente manera: 

blog/views.py 


form = PostForm(request.POST) 


Lo siguiente es verificar si el formulario esta correcto (si todos los campos necesarios estan definidos y no hay valores 
incorrectos). Lo hacemos con form.is^vaiidf) . 

Comprobamos que el formulario es valido y, si es asi, jlo podemos salvar! 
blog/views.py 


if form.is_valid(): 

post = form.save(commit=False) 
post.author = request.user 
post.published_date = timezone.now() 
post.save() 


Basicamente, tenemos que hacer dos cosas: guardamos el formulario con form.save y anadimos un autor (ya que no 
habia ningun campo de author en el PostForm y este campo es obligatorio). commit=Faise significa que no queremos 
guardar el modelo post aim - queremos anadir el autor primero. La mayoria de las veces utilizaras form.save() , sin 
commit=Faise , pero en este caso, tenemos que hacerlo. post. save( ) conservara los cambios (anadiendo a autor) y se 
creara una nuevo post en el blog! 

Por ultimo, seria genial si podemos inmediatamente ir a la pagina postjietaii del nuevo post, ^no? Para hacerlo 
necesitamos importar algo mas: 

blog/views.py 


from django.shortcuts import redirect 


Agregalo al principio del archivo. Y ahora podemos decir: "ve a la pagina post_detaii del post recien creado": 
blog/views.py 


return redirect(' post_detail' , pk=post.pk) 


post_detaii es el nombre de la vista a la que queremos ir. ^.Recuerdas que esta view requiere una variable pk ? Para 
pasarlo a las vistas utilizamos pk=post.pk , donde post es el post recien creado! 

Bien, hablamos mucho, pero probablemente queremos ver como se ve la vista, ^.verdad? 

blog/views.py 
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def post_new( request) : 

if request.method == "POST": 

form = PostForm(request.POST) 
if form.is_valid(): 

post = form.save(commit=False) 
post.author = request.user 
post.published_date = timezone.now() 
post.save() 

return redirect( 'blog.views.post_detail' , pk=post.pk) 

else : 

form = PostForm() 

return render(request, 'blog/post_edit.html' , {'form': form}) 


Veamos si funciona. Ve a la pagina http://127.0.0.1:8000/post/new/, anade un title y un text , guardalo... y voila! Se ha 
anadido el nuevo post al blog y somos redirigidos a la pagina de post_detaii ! 

Puede que hayas notado que estamos indicando la fecha de publication antes de guardar el post. Mas adelante 
introduciremos un botdn de publicaren el libro Django Girls Tutorial: Extensions. 

jEso es genial! 

Como recientemente hemos utilizado la interfaz de administrador de Django, el sistema piensa que estamos 
conectados. Hay algunas situaciones que podrian llevamos a desconectarnos (cerrando el navegador, reiniciando la 
base de datos, etc.). Si estas recibiendo errores al crear un post que indican la falta de inicio de sesion de usuario, 
dirigete a la pagina de admin http://127.0.0.1:8000/admin e inicia sesion nuevamente. Esto resolvera el problema 
temporalmente. Hay un arreglo permanente esperandote en el capitulo Tarea: jAnadir seguridad a tu sitio web! 
despues del tutorial principal. 

'.s ^ | [j localhost:8000/post/new/ 

ValueError at/post/new/ 

Cannot assign "<simpleLazyObject: <django.contrib.auth.models.AnonymousUser object at 0x3264b50»": "Post.author’' must be a "User” 
instance. 

Request Method: POST 

Request URL: http://localhost:800Q/post/new/ 

Django Version: 1.6.5 
Exception Type: ValueError 

Exception Value: Cannot assign "<SimpleLazyObject: <django.contrib.auth.models,AnonymousUser object at 0x3264b50»": "Post.author" must be a "User" instance. 


Validacion de formularios 

Ahora, vamos a ensenarte que tan bueno es Django forms. Un post del blog debe tener los campos title y text . En 
nuestro modelo post no dijimos (a diferencia de pubiished_date ) que estos campos no son requeridos, as! que Django, 
por defecto, espera que esten definidos. 

Trata de guardar el formulario sin title y text . jAdivina que pasara! 
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- Django Girls Blog x _ 

CD 12 7.0.0.1:8000/post/new/ 


Vjjang&QirU 


'Newport 

• This field is required. 

Title: 


• This field is required. 

Text: 


Django se encarga de validar que todos los campos en el formulario esten correctos. <^No es genial? 

Editar formulario 

Ahora sabemos como agregar un nuevo formulario. Pero, ?,que pasa si queremos editar uno existente? Es muy similar a lo 
que acabamos de hacer. Creemos rapidamente algunas cosas importantes. (si no entiendes algo, preguntale a tu tutora o 
tutor, o revisa lo capitulos anteriores, son temas que ya hemos cubierto.) 

Abre biog/tempiates/biog/post_detaii.htmi en el editor de codigo y anade la linea 

blog/templates/blog/post_detail.html 


<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"x/spanx/a 


para que la plantilla quede asi: 
blog/templates/blog/post_detail.html 
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{% extends 'blog/base.html' %} 

{% block content %} 

<div class="post"> 

{% if post.published_date %} 

<div class="date"> 

{{ post.published_date }} 

</div> 

{% endif %} 

<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></ 
spanx/a> 

<hl>{{ post.title }}</hl> 

<p>{{ post.text|linebreaksbr }}</p> 

</div> 

{% endblock %} 

A _“_ HI2] 

Abre biog/uris.py en el editor y anade esta linea: 
blog/urls.py 


path(' post/<int:pk>/edit/' , views.post_edit, name=' post_edit' ), 


Vamos a reusar la plantilla biog/tempiates/biog/post_edit.htmi , asi que lo ultimo que nos falta es una view. 
Abre blog/views. py en el editor de codigo y anade esto al final del todo: 
blog/views.py 


def post_edit( request, pk): 

post = get_object_or_404(Post, pk=pk) 
if request.method == "POST": 

form = PostForm(request.POST, instance=post) 
if form.is_valid(): 

post = form.save(commit=False) 
post.author = request.user 
post.published_date = timezone.now() 
post.save() 

return redirect(' post_detail ' , pk=post.pk) 

else : 

form = PostForm(instance=post) 

return render(request, ' blog/post_edit.html ' , {'form': form}) 


Esto se ve casi exactamente igual a nuestra view post_new , i,no? Pero no del todo. Primero: pasamos un parametro extra 
pk de los urls. Segundo: obtenemos el modelo post que queremos editar con get_object_or_404(Post, pk=pk) y 
despues, al crear el formulario pasamos este post como una instancia tanto al guardar el formulario... 

blog/views.py 


form = PostForm(request.POST, instance=post) 


... y justo cuando abrimos un formulario con este post para editarlo: 
blog/views.py 


form = PostForm(instance=post) 


Ok, jvamos a probar si funciona! Dirigete a la pagina post_detaii . Ahi debe haber un boton para editar en la esquina 
superior derecha: 
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1 ® O O Q] Django Girls Blog x \y. 

I <- CD 12 7.0.0.1:8000/post/3/ 

_☆ h 

Qjang&GirU 

+ 


fluUafaciU&i 


June 28, 2014, 3:48 p.m. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum sapien interdum, posuere 
massa et, hendrerit leo. Nam commodo facilisis sapien vitae ornare. Integer eget purus posuere, 
vestibulum arcu at, pulvinar elit. Integer eleifend, nisi a molestie auctor, dui arcu ultricies erat, sei 
dapibus ante tellus id est. Aliquam erat volutpat. Vestibulum tellus est, ultrices nec iaculis sit ame- 
hendrerit in mauris. Suspendisse lacinia mi in magna tincidunt, sed convallis ipsum semper. Clas 


Al dar click ahi, debes ver el formulario con nuestro post del blog: 


® ® J ( 2 ) Django Girls Blog 

CD 12 7.0.0.1:8000/post/3/edit/ 


Qjjang&QirU 


flew pool 

Title: 

Nulla facilisi 

Text: 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibenc 
massa et, hendrerit leo. Nam commodo facilisis sapien vitae ornare. 
vestibulum arcu at, pulvinar elit. Integer eleifend, nisi a molestie auc 
dapibus ante tellus id est. Aliquam erat volutpat. Vestibulum tellus ee 
hendrerit in mauris. Suspendisse lacinia mi in magna tincidunt, sed i 

jSientete libre de cambiar el titulo o el texto y guarda los cambios! 
jFelicitaciones! jTu aplicacion esta cada vez mas completa! 

Si quieres saber mas sobre los Django forms, puedes encontrar la documentacion aqui: 

https://docs.djangoproject.eom/en/2.0/topics/forms/ 
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Seguridad 

jPoder crear nuevas publicaciones haciendo click en un enlace es genial! Pero, ahora mismo, cualquiera que visite tu 
pagina podria publicar un nuevo post y seguro que eso no es lo que quieres. Vamos a hacer que el boton sea visible para 
ti pero no para nadie mas. 

Abre biog/tempiates/biog/base.htmi en el editor, busca el div page-header y la etiqueta del enlace (anchor) que 
pusimos antes. Deberia ser algo asi: 

blog/templates/blog/base.html 


<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"x/span></a> 


Vamos a anadir otra etiqueta {% if %} que hara que el enlace solo parezca para los usuarios que hayan iniciado sesion 
en el admin. Ahora mismo, jeres solo tu! Cambia la etiqueta <a> para que se parezca a esto: 

blog/templates/blog/base, html 


{% if user.is_authenticated %} 

<a href="{% url 'post_new' %}" class="top-menu"xspan class="glyphicon glyphicon-plus"x/spanx/a> 

{% endif %} 

Este {% if %} hara que el enlace solo se envie al navegador si el usuario que solicita la pagina ha iniciado sesion. Esto 
no protege completamente la creacion de nuevas entradas, pero es un buen primer paso. Veremos mas sobre seguridad 
en el libro de extensiones. 

Recuerdas el icono de "editar" que acabamos de anadir a nuestra pagina de detalles? Tambien queremos anadir lo mismo 
aqui, asi otras personas no podran editar posts existentes. 

Abre biog/tempiates/biog/post_detaii.htmi en el editor y busca esta linea: 

blog/templates/blog/post_detail.html 


<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"x/spanx/a 


4 


JiJ 


Cambiala a lo siguiente: 
blog/templates/blog/post_detail.html 


{% if user.is_authenticated %} 

<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"x/span 
></a> 

{% endif %} 
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Hi] 


Dado que es probable que estes conectado, si actualizas la pagina, no veras nada diferente. Carga la pagina en un 
navegador diferente o en una ventana en modo incognito ("privado" en Windows Edge) y veras que el link no aparece, y el 
icono tampoco! 


Una cosa mas: jTiempo de despliegue! 

Veamos si todo esto funciona en PythonAnywhere. jTiempo de hacer otro despliegue! 

• Lo primero, haz commit de tus ultimos cambios y subelo (push) a GitHub: 
command-line 
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$ git status 
$ git add --all . 

$ git status 

$ git commit -m "Added views to create/edit blog post inside the site. 
$ git push 


• Luego, en una consola Bash de PythonAnywhere 

command-line 


$ cd ~/<your-pythonanywhere-username>.pythonanywhere.com $ git pull 
[...] 


(Recuerda sustituir <your-pythonanywhere-username> con tu nombre de PythonAnywhere real, sin los signos de angulo). 

• Para terminar ve a "Web" page (usa el boton del menu de la esquina superior derecha, encima de la consola) y haz 
click en Reload. Refresca tu blog https://yourname.pythonanywhere.com para ver los cambios. 

jY eso deberia ser todo! Felicidades :) 
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c,Y ahora que? 


cQue sigue? 

Date muchas felicitaciones. jEres increible! jEstamos orgullosas! <3 

<i,Que hacer ahora? 

Toma un descanso y relajate. Acabas de hacer algo realmente grande. 

Despues de eso, asegurate de seguir a Django Girls en Facebook o Twitter para estar al dia. 

<i,Me puedes recomendar recursos adicionales? 

jClaro! En primer lugar, sigue adelante y prueba nuestro otro libro llamado Django Girls Turorial: Extensions. 

Luego, puedes intentar los recursos listados a continuation. jTodos son muy recomendados! 

• Django's official tutorial (Tutorial oficial de Django) 

• New Coder turorials (Tutoriales de "New Coder") 

• Code Academy Python course (Curso de python en Code Academy) 

• Code Academy HTML & CSS course (Curso de HTML y CSS en Code Academy) 

• Django Carrots tutorial (Tutorial de Django de "Carrots") 

• Learn Python The Hard Way book (Libro Aprende Python a las Malas) 

• Getting Started With Django video lessons (Lecciones de video Empezando con Django) 

• Two Scoops of Django 1.11: Best Practices for Django Web Framework book (Libro Dos Cucharadas de Django 1.11: 
mejores practicas para Django Web Framework) 

• Hello Web App: Learn How to Build a Web App (Hola aplicacion web: Aprende como construir una aplicacion web) - 

tambien puedes solicitar un eBook gratis contactando con la autora Tracy Osborn en tracy@limedaring.com 
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